html - 如何让屏幕阅读器在里面读取 aria-label ?
问题描述
当鼠标悬停在菜单栏中的“故事”按钮上时,我希望屏幕阅读器阅读文本“故事,菜单项”。我已经尝试添加aria-label
以及在aria-describedby
内部,span
但屏幕阅读器仍在阅读“故事”文本,而不是“故事,菜单项”文本。
原始代码:
<li role="menuitem">
<span class="">Stories</span>
</li>
我尝试过但不起作用的事情:
(1) 添加aria-label
<li role="menuitem">
<span class="" aria-label="stories, menu item">Stories</span>
</li>
(2) 添加aria-describedby
<li role="menuitem">
<span class="" aria-describedby="stories, menu item">Stories</span>
</li>
解决方案
有一些奇怪的事情正在发生。
首先,在您的 OP 中,您询问了“鼠标悬停在”元素上时是否阅读文本。大多数屏幕阅读器用户不会使用鼠标,也不会将鼠标悬停在元素上。NVDA 屏幕阅读器有一个鼠标悬停选项,因此将鼠标移到元素上会阅读它,但该功能主要适用于有视力的测试人员。我从来没有发现鼠标悬停 NVDA 功能的用途。
所以我猜你的问题更多是关于用户何时导航到该项目,你希望它阅读额外的文本。不仅仅是视觉上显示的。
尽管您在描述中提到了“按钮”,但您发布的代码实际上并没有键盘可聚焦元素。我暂时忽略这一点,并假设您有一个可聚焦的元素,最好是原生语义 HTML 元素。
另一个奇怪的地方是您想要宣布“菜单项”(大概是因为您没有听到宣布的内容)但是应该根据role
您的元素(即“menuitem”)宣布文本。您不必强制宣布元素的角色。使用语义 html 元素或正确使用role
. 在这种情况下,如果获得焦点的元素有,则应该宣布“菜单项” role="menuitem"
。在您的情况下,您的代码示例可能过于简化,但就目前而言, the<li>
具有 menuitem 角色,但不是<li>
接收焦点的元素。(按钮?)内的元素正在接收焦点。<li>
最后,问题的症结在于,通常不支持aria-label
a 上的 a <span>
,除非该 span 有作用。请参阅https://www.w3.org/TR/using-aria/#label-support上的倒数第三个要点。但同样,您不必强制宣布“菜单项”。
旁注:您使用的第三个示例,aria-describedby
该属性的值应该是空格分隔的ID列表。它不应该是文字字符串。
推荐阅读
- android - 如何在 Android Studio 中运行从 Github 存储库中选择的项目
- java - Appium POM java.lang.NoSuchMethodException: jdk.proxy2.$Proxy15.proxyClassLookup()
- r - 根据条件返回 R 数据框中的行,其中每个组都有最大值
- oracle - 无法在docker中重新启动oracle数据库
- ruby-on-rails - 如何为不同的用户更改“password_archiving_count”的 Devise Security Gem 配置?
- flutter - 避免使用应用发送自动点击
- winapi - 在 Windows 中切换用户时如何保持音频播放?
- mobile - 下载 GPX 文件的链接,以便它在 mobil 上运行
- doccano - Doccano:无法上传 jsonl
- visual-studio-code - Jupyter Notebook 在 VS Code 中切换到旧界面?