我编写了一个使用 jQuery 显示模态弹出窗口的网站。它实质上用覆盖层覆盖了屏幕的整个可视区域，然后在覆盖层的顶部显示了一个包含实际弹出窗口的 DIV。该项目的要求之一与可访问性有关。
我们已经能够在模态框弹出时将焦点放在模态框内，以便屏幕阅读器停止其正在执行的操作并开始在模态框内阅读。但是，我们当前的问题是，一旦 JAWS 屏幕阅读器完成模式窗口内的文本阅读，它会继续阅读并阅读窗口外的文本(覆盖层下方)。
有什么方法可以将屏幕阅读器“锁定”在特定元素内，使其无法阅读元素之外的任何内容？
最佳答案
如果添加以下属性:
aria-disabled="true"
在模态中设置焦点后，网站标记的其余部分应防止屏幕阅读器阅读该内容。如果所有其他内容都在一个 DIV 中并且模型作为该 DIV 的同级添加到 DOM 中(因此您只需要将该属性添加到一个元素上)，这是最容易做到的。
或者，如果您的对话框可行，您可以添加一些 JavaScript 制表键/焦点检测，以使用户在此对话框中保持循环。如果您无法使用键盘退出对话框(除非按下关闭/取消按钮)，它通常应该可以访问。
关于jquery - 屏幕阅读器可以是 DIV 元素中的 "locked"吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9898917/