我正在使用 Twitter Bootstrap 开发一个项目，并使用屏幕阅读器玩JavaScript 组件。
当我触发模态对话框时，Jaws 会跳过模态框，转到页面中的下一个链接。
有没有办法实现可访问的模式？
我认为的另一个解决方案是为模式的功能制作一个静态页面，并在用户使用屏幕阅读器时重定向到该页面。如果用户正在使用屏幕阅读器，我可以以某种方式检测到吗？
user800014
问问题
7296 次
2 回答
7
编辑 2019：N. Hoffmann 在vanilla 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 Making a Dialog Modal。
如果您需要更 DIY 的方法，J. Wajsberg 编写了一个 jQuery 插件，能够将键盘输入捕获在 DOM 元素中。
于 2012-04-05T08:40:38.563 回答
0
如果用户使用屏幕阅读器，我不知道有任何自动检测的解决方案。但是有谷歌解决方案可以在页面开头隐藏链接（左侧：-1000em 和位置：绝对），如果您使用键盘并显示“特殊模式”，则可以激活该链接。
<a href="#" style="left:-1000em;position:absolute">Screen reader users, click here to turn off Google Instant.</a>
对于您的模态对话框，请尝试在对话框 html div 上使用 aria 和 aria-atomic="true" aria-live="assertive" 属性。它应该宣布您对话框的内容。
于 2012-04-05T07:35:04.437 回答