使用aria-alertdialog确认错误_____20160429

原文网址


说明

该技巧的目的是警告用户输入错误。使用role="alertdialog"来创建一个通知,这个通知应该与以下行为联合使用:

  • aria-label或aria-labelledby属性给alertdialog一个无障碍的名字;
  • aria-labelledby为警告的文本提供一个参考;
  • alertdialog包含至少一个焦点,当alertdialog被打开时应该自动获得焦点;
  • tab顺序应该限制在alertdialog内,当alertdialog打开时;
  • 将窗口关闭时,如果可能的话应该返回原位置;

注意:警告框应该不会被辅助技术所访问,除非警告框需要被识别。需要做的是不要在静态html中包含alertdialog,而是当错误信息被触发的时候,将它通过脚本插入到DOM中。


样例

样例1:弹出窗口


在线样例


无障碍效果

各读屏、各浏览器的支持效果

测试人:

争渡、IE11:
永德、IE11:
NVDA、IE11:
永德、chrome:
NVDA、chrome:
NVDA、Firefox:
voiceover、chrmoe:
voiceover、Safari: