使用Aria-Invalid来标识错误区域____20160429
说明
该技巧用来说明aria-invalid怎样用来标识特定区域的错误验证。使用场景如下：
- 错误描述不能编程式标识错误区域；
- 错误区域使用的标识方法对某些用户不可获得，例如，使用某些技术渲染视觉错误图标，而不是依赖边框颜色改变等视觉提示。
注意：以上两种情景适用于有编程式链接标签的区域，或者编程式链接有格式说明、数据范围或者必填属性的区域。
开发者偏向使用编程式链接错误区域的特定错误描述，但是网页使用的界面设计或框架有时限制开发者这样做。在这种情景下，开发者可以在需要验证的区域上编程式设置aria-invalid为真。该技术主要被视障人群使用的辅助技术所应用，例如屏幕阅读器、屏幕放大器。当区域有aria-invalid且被设置为真时，在Safari中，区域获得焦点时朗读“invalid data （无效数据）”；JAWS和NVDA标识错误为“invalid entry（无效输入）”。
这个aria属性必须编程式设置或打开。在输入验证执行之前或表单提交之前，该属性不应设置为true。设置aria-invalid为false时，相当于不添加该属性，在这种情景下，辅助技术不会传递任何信息。
当视觉文本被编程式标识错误区域或用来传递怎样更正错误的信息，设置aria-invalid为true不是一致性所必须的，但是仍可以为用户提供有用信息。
样例
样例2：确定数据格式错误
在确认用户身份证号码、邮件地址、开始结束日期的格式错误的时候，Aria-invalid和aria-describedby是合起来用的。错误信息需要使用aria-describedby与区域联系起来，aria-invalid将使错误区域更易编程式获得。
当输入无效的邮件地址时，没有@，html代码为：
当没有数据输入时，html代码为：
QUERY代码：JQUERY用来添加aria-invalid或者aria-describedby属性作为class属性和添加错误文本，这是一段将代码，用来插入aria-invalid和error class，但是没有将错误信息与控件编程式联系起来：
CSS代码为：
无障碍效果
各读屏、各浏览器的支持效果
测试人：
- 争渡、IE11：
- 永德、IE11：
- NVDA、IE11：
- 永德、chrome：
- NVDA、chrome：
- NVDA、Firefox：
- voiceover、chrmoe：
- voiceover、Safari：
