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

标签 javascript twitter-bootstrap modal-dialog accessibility jaws-screen-reader

我正在使用 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/

相关文章:

javascript - 具有不同主题标签 URL ID 的 Bootstrap 轮播

javascript - 警报或模态屏幕 JavaScript

twitter-bootstrap - 如何在 Bootstrap 3 中使页脚成为整个窗口的宽度?

jquery - 将 HTML 数据属性传递给语义 UI 模式

angular - 如何创建与 Angular 4 兼容的模态弹出窗口

javascript - 模态对话框验证 ASP.NET/bootstrap

Javascript RegEx 没有按预期返回 false

javascript - 将 async/await 与 forEach 循环结合使用

javascript - 使用 CDN 的 Google PageSpeed Insight CSS Javascript "above the fold"问题

javascript - 如何仅为某些用户添加按钮 - socket.io