2

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

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

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

演示链接可以在这里找到：https ://codepen.io/kaashan/pen/KOmGYe 。使用的代码来自 W3.org 模式对话框的可访问性指南，对显示选项卡进行了细微修改，并将第一个选项卡元素聚焦在模式打开上。

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

<a>有人可以帮助解释在 NVDA 读取聚焦的 tab( ) 元素后应该做什么来暂停它吗？

4

2 回答 2

2

您误解了 NVDA 的使用方式。

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

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

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

断章取义很难完全测试某些东西，但在您给出的示例中，您似乎走在了正确的轨道上。

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

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

希望这可以帮助。

于 2019-08-01T16:33:33.157 回答
0

在按照此处提到的可访问性指南实现对话框内的选项卡后，我能够解决该问题。我注意到只需标记<a>withrole=tab属性就可以解决 NVDA 的问题。

于 2019-08-24T17:06:49.727 回答