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

Question

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

当使用NVDA屏幕阅读器测试该功能时，可以看到在读取对话框标签和描述（由aria-labelledby和aria-describedby指出）之后，它会读取聚焦的标签元素。 但是，之后继续读取以模态标题开头的整个模态对话框内容。 这不是我们想要的阅读行为。

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

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

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

有人可以帮助解释在读取聚焦标签（ <a> ）元素后暂停NVDA应该怎么做？

Answer 1

您误解了NVDA是如何使用的。

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

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

只需遵循最佳实践（如您所做），让用户担心他们希望读者如何运作。

很难完全测试一些脱离背景的东西，但在你给你的例子中似乎是在正确的轨道上。

要检查两件事（在你正在使用的文件中）

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

希望这可以帮助。

Answer 2

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