返回

表单：使用aria-invalid标识错误区域

特征

• 只有当输入数据不是期望结果时，为区域添加一个aria-invalid属性。这样在区域旁会有一般错误文本，但是该文本未链接到区域。
• 当无数据输入时，对每个区域使用标准一般错误信息。错误信息使用aria-describedby链接区域。
• 显示过去日期（2001年1月1日后）的错误通过标记与区域相联系。
• 每一个验证失败的表单控件都有一个红色的边框，并在右边有一个错误图标，通过CSS放置，增强视觉效果。
• 日期不是一个必填区域。不填写的情况下会自动填入今天的日期。
• 错误信息使用具有role=alert的span标签，被放置在表单前面。span标签在一个h2元素内，可以摆NVDA和JAWS读取。Voiceover在iOS和OSX上也可以读取。

关于错误信息

• 当一个区域为aria-invalid=true，JAWS和NVDA展示为“invalid entry”。
• OSX和iOS的Safari中，VoiceOver展示为“invalid data”。
• 区域的标签（或其他无障碍名字）在“invalid”通知之前被公布。
• 特定区域的错误信息，使用aria-describedby链接，被JAWS和NVDA作为区域的标签朗读。Voiceover只在iOS上自动朗读，错误信息在读出标签短暂停顿后读出。在OSX的MacBook pro中，使用VO+Shift+h组合键可以让Voiceover朗读使用aria-describedby链接的错误信息。
• 在IE11浏览器中，使用争渡公益版屏幕阅读器，点击提交之后自动朗读“登录失败：请修改错误重新输入！警告”；重新聚焦编辑框，朗读与提交之前相同，未有错误提示；
• 在IE11浏览器中，使用永德屏幕阅读器，点击提交之后自动朗读“登录失败：请修改错误重新输入！警报1”；重新聚焦错误输入的编辑框，除了编辑框原有朗读外，会有“高级警报”提示。
• 在IE浏览器中，使用NVDA屏幕阅读器，编辑框无数据输入时，点击提交之后自动朗读“登录失败：请修改错误重新输入！标题2级”，重新聚焦编辑框（aria-invalid="true"已被加入到编辑框代码中），屏幕阅读器朗读：“编辑框标签+“错误的输入”+编辑框内容”，例如当输入内容为12时，朗读“名 必填 错误的输入 12”；聚焦有输入错误的编辑框（也就是用aria-describedby所报关联的文本），除原有朗读外，会有错误输入，如本例中的“错误 错误输入”提示；