accessibility - 屏幕阅读器如何处理模态窗口？

Question

有谁知道各种屏幕阅读器如何与模式窗口交互，即：Thickbox？模态的内容在读者点击后是否会引起读者的关注？

Answer 1

这取决于您使用的模态解决方案。许多人在焦点管理方面做得不好：

• 将键盘焦点放在模式中的第一个元素上。
• 当到达模式结束时将焦点循环回第一个元素（而不是让焦点循环到浏览器镶边或模式后面的页面）。
• 当模态框关闭时，将键盘焦点返回到原始位置（例如打开按钮或链接）。

如果您使用的解决方案不这样做，您可以在自己的 JavaScript 中执行此类操作。例如，如果您知道第一个可聚焦元素：

var focusMe = document.getElementById("#modal-focus-start");
if (focusMe) {
    focusMe.focus();
}

或者，如果您想关注模式中的第一个链接。

var modal = document.getElementById("#modal"),
    focusMe;
if (modal) {
    focusMe = modal.getElementsByTagName("a")[0];
    if (focusMe) {
        focusMe.focus();
    }
}

如果您没有方便的可聚焦元素来移动焦点，一些现代浏览器（我上次检查时 Firefox 似乎有问题）允许您设置tabindex任何-1HTML 元素，使该元素可通过 JavaScript 聚焦。

如果您想更进一步，您可以使用 JavaScript 在模态框内找到第一个可聚焦元素（使用 jQuery）。