jquery - 屏幕阅读器可以在 DIV 元素中“锁定”吗？

Question

我编写了一个使用 jQuery 来显示模式弹出窗口的网站。它基本上用覆盖覆盖了屏幕的整个可视区域，然后在覆盖顶部显示一个包含实际弹出窗口的 DIV。该项目的要求之一与可访问性有关。

当它弹出时，我们已经能够在模态框内获得焦点，以便屏幕阅读器停止它正在做的事情并开始在模态框内阅读。然而，我们当前的问题是，一旦 JAWS 屏幕阅读器完成模式窗口内的文本阅读，它会继续阅读窗口外的文本（覆盖层下方）。

有什么方法可以将屏幕阅读器“锁定”在特定元素内，使其无法读取其外部的任何内容？

Answer 1

如果添加以下属性：

aria-disabled="true"

在模态中设置焦点后，对于站点标记的其余部分，它应该阻止屏幕阅读器阅读该内容。如果所有其他内容都在一个 DIV 中，并且模型作为该 DIV 的同级添加到 DOM 中（因此您只需将该属性添加到一个元素上），这是最容易做到的。

或者，如果您的对话框可以使用，您可以添加一些 JavaScript 制表符/焦点检测，以使用户在此对话框中循环。如果您无法使用键盘退出对话框（按下关闭/取消按钮），通常应该可以访问它。