我正在使用 Twitter Bootstrap 开发一个项目,并尝试使用 JavaScript components使用屏幕阅读器。
当我触发模式对话框时,Jaws 会跳过模式转到页面中的下一个链接。
有没有办法实现无障碍模式?
我认为的另一个解决方案是为模式的功能制作一个静态页面,并在用户使用屏幕阅读器时重定向到该页面。如果用户正在使用屏幕阅读器,我能以某种方式检测到吗?
最佳答案
2019 年编辑:N. Hoffmann 在 vanilla JS 中编写并维护了一个可访问的模态组件(连同其 van11y 项目中的其他组件)和 jQuery .
通过 data-*
属性和类可以轻松修改行为和样式。
它已经在更多条件下(屏幕阅读器等)进行了测试,您可以使用自己的脚本进行测试;-)
Bootstrap 4 和 Bootstrap 3 在其最新版本中也有一个相当容易访问的模式(大部分或所有 Paypal Bootstrap 可访问性插件被反向移植到 3.3.x)。
现代资源: Access & Use 欧洲倡议以简单的方式详细介绍了许多有趣的方面,并指向其他资源,包括最新的 ARIA Deisgn 模式。
这是一个可访问的模式对话框:http://hanshillen.github.com/jqtest/#goto_dialog
一旦模式被激活,键盘导航就会被困在对话框中,直到它被用户明确关闭。
http://irama.org/web/dhtml/lightbox/详细介绍了这种可访问的实现(灯箱和模态对话框之间几乎没有区别,重要的是模态部分和键盘管理)。
您还可以阅读 DHTML 样式指南的非官方副本 dialog modal部分和 W3C/WAI-ARIA Making a Dialog Modal .
J. Wajsberg 写了一个 jQuery 插件能够 trap the keyboard input inside a DOM element如果您需要更多 DIY 方法。
关于javascript - 有没有办法做一个可访问的模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10016433/