html - NVDA 在读取模态对话框中的焦点元素后读取所有模态内容
问题描述
我已经实现了关注<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( ) 元素后应该做什么来暂停它吗?
解决方案
您误解了 NVDA 的使用方式。
您试图阻止的行为是 INTENDED 行为,它允许用户查看表单包含的内容并了解他们将要填写的内容。
不要试图让 NVDA 按您希望的方式工作。
只需遵循最佳实践(就像您所做的那样),让用户担心他们希望阅读器如何工作。
断章取义很难完全测试某些东西,但在您给出的示例中,您似乎走在了正确的轨道上。
要检查的两件事(在您使用它的文档中)
- modal 不会读取隐藏在 tab 2 后面的内容,并且在打开时不会读取任何其他页面内容,它应该在读取整个 modal 内容后停止。
- 您可以使用 Escape 键关闭模式。
希望这可以帮助。
推荐阅读
- javascript - Firestore onSnapshot() 返回 null
- wordpress - 所有页面/编号的Wordpress 5重定向
- arrays - 将 CSV 文件读入结构的动态数组 C
- g1gc - 为什么 G1GC 中的 XX:G1HeapRegionSize 必须是 2 的幂?
- reactjs - 在 React 中如何创建一个组件,该组件可以获取 HTML 元素属性并在作为道具传递给子元素之前对其进行调整
- angular - AWS Cognito 电子邮件验证和登录
- r - R中的Highcharts:为组织结构图中的链接添加标签
- javascript - 在javascript中将表数据更改为相应的数据
- xamarin.forms - 如何更改单个内容页面 Xamarin(Ios、Android)的状态栏背景、文本颜色
- android - 如何在多个 APK 之间共享公共共享库以减小大小