NVDA 在读取模态对话框中的焦点元素后读取所有模态内容

Posted 2023-05-07

【中文标题】NVDA 在读取模态对话框中的焦点元素后读取所有模态内容

【英文标题】：NVDA reads all modal content after reading the focused element in modal dialog

【发布时间】：2019-12-09 16:08:03

【问题描述】：

我已经实现了关注模态对话框中的第一个选项卡（基本上是 <a> 元素）的要求。

当使用 NVDA 屏幕阅读器测试该功能时，观察到在读取对话框标签和描述（由 aria-labelledby 和 aria- describeby 指向）后，它会读取焦点选项卡元素。但是，之后它会继续读取从模态标题开始的整个模态对话框内容。这不是我们想要的阅读行为。

如果我们将焦点放在模式对话框中的第一个输入元素上，而不是 tab(<a>) 元素上，它就可以正常工作。 NVDA 在读取焦点输入元素后暂停。只有当我们使用 Tab 键导航时，才会读取更多元素。这是我们想要的阅读行为，但我们不想关注输入元素。

演示链接可以在这里找到：https://codepen.io/kaashan/pen/KOmGYe . 使用的代码来自 W3.org accessibility guidelines for modal dialogs 稍作修改以显示选项卡并将第一个选项卡元素聚焦在模式打开上。

我正在使用 NVDA2019.1.1 版本和最新版本的 Chrome 和 Firefox 浏览器进行测试。

有人可以帮助解释在读取焦点选项卡 (<a>) 元素后应该如何暂停 NVDA 吗？

【参考方案1】：

您误解了 NVDA 的使用方式。

您试图阻止的行为是 INTENDED 行为，它允许用户查看表单包含的内容并了解他们将要填写的内容。

不要试图让 NVDA 按你希望的方式工作。

只需遵循最佳做法（就像您所做的那样），让用户担心他们希望阅读器如何工作。

很难完全测试脱离上下文的东西，但在您给出的示例中，您似乎走在了正确的轨道上。

要检查的两件事（在您使用它的文档中）

modal 不读取隐藏在 tab 2 后面的内容，并且在打开时不读取任何其他页面内容，它应该在读取整个 modal 内容后停止。 您可以使用 Escape 键关闭模式。

希望这会有所帮助。

【讨论】：

感谢 Graham 抽出宝贵时间并就该主题提出建议。我的期望是为用户提供统一的可访问性体验，而与他们使用的屏幕阅读器软件无关。因此，在我当前的实现和使用 JAWS 屏幕阅读器的情况下，行为符合我的预期（在宣布焦点元素并在选项卡键导航上阅读更多模式内容后暂停）。但是 NVDA 的行为不同，因此我认为可能有一种方法可以获得类似的阅读行为。不幸的是，当我对这个问题进行更多探索时，没有办法。

提供“统一的可访问性体验”可能听起来很可取，但事实并非如此。这就像使网站像素完美并且在所有浏览器中看起来都一样。这既不可能也没有必要。屏幕阅读器之间可能有很大不同，用户往往会更改很多设置。提供相同的体验几乎是不可能的，所以我建议忘记这个想法。

关注自我思考者。很高兴我能帮助 Kaashan，希望项目进展顺利 :-)

【参考方案2】：

根据提到的可访问性指南here，在对话框内实现选项卡后，我能够解决问题。我注意到只需用role=tab 属性标记<a> 就可以解决NVDA 的问题。