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

Question

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

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

如果我们将焦点放在模式对话框内的第一个输入元素上，而不是tab（{<a>）元素上，它将正常工作。读取聚焦的输入元素后，NVDA暂停。仅当我们使用Tab键导航时，其他元素才会被读出。这是我们想要的阅读行为，但是我们不想集中输入元素。

演示链接可以在这里找到：https://codepen.io/kaashan/pen/KOmGYe 。 使用的代码来自 W3.org accessibility guidelines for modal dialogs进行了少量修改，以显示标签，并将第一个标签元素集中在模式打开上。

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

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

Answer 1

您误解了NVDA的使用方式。

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

请勿尝试让NVDA按照您希望的方式工作。

只需遵循最佳实践（如您所做的那样），并使用户担心他们希望读者如何工作。

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

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

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

希望这会有所帮助。

Answer 2

按照here中提到的可访问性准则，在对话框中实现了选项卡后，便能够解决该问题。我注意到，仅用<a>属性标记role=tab即可解决NVDA问题。