JAWS（在Windows上）无法读取`<p>`标记上给出的aria标签

Question

我在网页中为<p>标签指定了特定的aria标签。

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

在Mac屏幕阅读器上，此标签上给出的aria标签可以很好地读取，但在JAWS上（在Windows上）却没有发生。是否需要添加任何特定设置/额外标签才能在JAWS中读取相同的设置？有什么想法吗？

Answer 1

您可以通过将文本移到具有aria-label属性的<span>来代替视觉上隐藏的文本

例如

aria-hidden="true"

视觉上隐藏的类将具有：

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

Answer 2

如果要设置aria-label属性的元素没有指定的角色，则可以忽略该属性。在您的情况下，<p>除了文本以外没有其他语义。

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

特别是，请参阅第8个项目符号：

  

请勿在其他任何非交互式内容（例如aria-label，aria-labelledby，p或{{1}）上使用legend或li }，因为它被忽略了。

顺便说一句，段落文本的阅读方式与视觉显示方式不同，这是很不寻常的。因此，尽管您可以使用ul和“可视隐藏”类，但对于依靠运行屏幕阅读器和放大镜来增强其网络体验的弱视用户来说，这会带来问题。他们将能够在屏幕上看到一些文本，但是当他们听到时，文本将与他们看到的内容不符。