JAWS（在 Windows 上）不读取 `` 标签上给出的 aria-label答案

【问题标题】：JAWS ( on windows ) not reading aria-label given on `` tagJAWS（在 Windows 上）不读取 `` 标签上给出的 aria-label
【发布时间】：2018-12-05 10:15:27
【问题描述】：

我在我的网页中为 标签提供了一个特定的 aria-label。

<p aria-label="my custom text" className="inline">text</p>

上面给出的 aria-label 在 Mac 屏幕阅读器上读得非常好，但在 JAWS（在 windows 上）上没有发生。是否必须添加任何特定设置/额外标签才能在 JAWS 中读取相同内容？有什么想法吗？

【问题讨论】：

标签： javascript wai-aria screen-readers jaws-screen-reader

【解决方案1】：

aria-label 属性如果您设置它的元素没有指定角色，则可能会被忽略。在您的情况下， 除了文本之外没有任何语义含义。

见https://www.w3.org/TR/using-aria/#label-support

特别是，请参阅第 8 条：

请勿在任何其他非交互式内容上使用aria-label 或aria-labelledby，例如p、legend、li 或ul，因为它会被忽略。

顺便说一句，段落文本的阅读方式与视觉显示的不同是有点不寻常的。因此，虽然您可以使用aria-hidden 和“视觉隐藏”类，但对于依赖于通过运行屏幕阅读器和放大镜来增强网络体验的低视力用户来说，这将导致问题。他们将能够在屏幕上看到一些文本，但是当他们听到时，它与他们看到的不匹配。

【讨论】：

【解决方案2】：

您可以通过将文本移动到带有aria-hidden="true" 属性的 中来使用视觉隐藏文本，而不是aria-label

例如

<p className="inline">
<span aria-hidden="true">text</span>
<span class="visually-hidden">my custom text</span>
</p>

视觉上隐藏的类将有：

.visually-hidden{
position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

【讨论】：