有没有办法做一个可访问的模式?

Sér*_*els 6 javascript accessibility modal-dialog twitter-bootstrap jaws-screen-reader

我正在使用Twitter Bootstrap开发一个项目,并使用屏幕阅读器玩JavaScript组件.

当我触发模态对话框时,Jaws跳过模态进入页面中的下一个链接.

有没有办法实现可访问的模式?

我认为另一种解决方案是将静态页面设置为模态的功能,并在用户使用屏幕阅读器时重定向到此页面.如果用户使用屏幕阅读器,我能以某种方式检测到吗?

Fel*_*Als 7

EDIT 2019:N.Hoffmannvanilla JS(以及其van11y项目中的其他组件)和jQuery中编写并维护了一个可访问的模态组件.
可以通过data-*属性和类轻松修改行为和样式.
它已经过更多条件(屏幕阅读器等)的测试,你用你自己的脚本做了什么;-)

此外,Bootstrap 4在其最新版本中具有相当可访问的模态和Bootstrap 3(大部分或全部Paypal Bootstrap可访问性插件被反向移植到3.3.x).

现代资源:访问和使用欧洲计划以简单的方式详述了许多有趣的方面,并指向其他资源,包括最新的ARIA Deisgn模式.


这是一个可访问的模态对话框:http://hanshillen.github.com/jqtest/#goto_dialog

激活模态后,键盘导航将被捕获在对话框中,直到用户明确关闭.

http://irama.org/web/dhtml/lightbox/详细介绍了这样一个可访问的实现(灯箱和模态对话框之间没有什么区别,重要的是模态部分和键盘管理).
您还可以阅读DHTML样式指南非官方副本,对话框模态部分和W3C/WAI-ARIA 制作对话模式.

J. Wajsberg编写了一个jQuery插件,如果你需要更多的DIY方法,它能够将键盘输入陷入DOM元素中.