A11Y - 屏幕阅读器无法读取“aria-description”标签

Question

我目前在我的网站上有一些简单的标记，但似乎无法让屏幕阅读器阅读它。 我错过了什么吗？

<section aria-label="This is the text I want to be read "></section>

我也试过：

<section aria-description="This is the text I want to be read "></section>

该部分不是tabbable，因为它不是链接，不确定这是否与问题有关，但我对屏幕阅读器是否应该阅读某些内容的理解充其量只是粗略的。

有问题的屏幕阅读器，如果重要的话。

https://chrome.google.com/webstore/detail/screen-reader/kgejglhpjiefppelpmljglcjbhoiplfn

任何帮助表示赞赏。

Answer 1

根据ARIA 规范， <section>可以完美地具有 aria-label 属性。 大多数其他 HTML5 结构元素也允许使用 aria-label，因为它们是标志性区域。

因此，符合要求的屏幕阅读器应该会阅读它，而且据我测试，它们确实会阅读。

属性 aria-description 比 aria-label 更新，因此您应该更喜欢 aria-label 以最大程度地读取它。

为了做好相关的测试，我建议你使用真正的用户真正使用过的屏幕阅读器，而不是在现实生活中没有人使用的浏览器扩展。 您可以尝试以下一项或多项，具体取决于您的目标系统和可能性：（非详尽列表）

• 窗户下的 NVDA、Jaws 和 Supernova
• MacOS、iOS 和 iPadOS 下的 VoiceOver
• Android 下的 Talkback 和 VoiceAssistant

NVDA、VoiceOver 和 Talkback 是完全免费的，VoiceOver 甚至随时可用，无需安装任何东西。 所以你真的没有理由不去尝试一下。

Answer 2

这可能取决于您如何使用屏幕阅读器进行导航。 由于<section>不是键盘可聚焦元素，我假设您在其中有一些文本内容？ 大多数屏幕阅读器允许您使用向下箭头导航到页面上的所有元素，包括纯文本。 向下箭头基本上是遍历 DOM。 （它实际上遍历可访问性树，但现在将其视为遍历 DOM。）

如果您可以使用Tab键导航到<section>之前的可聚焦元素，那么您可以开始使用向下箭头到达该部分。

使用 NVDA，我听到“这是我想要阅读的文本，地区” 。 请注意，它说的是“区域”，因为<section>元素的默认角色是“区域”。

使用 JAWS，它不会读取aria-label ，但这是因为 JAWS 默认详细设置不包括区域。 如果您将详细程度设置从默认的“中”更改为“高”，那么当您向下箭头时，您将听到部分标签。 （或者您可以配置当前的详细设置以包含区域。）

使用 JAWS，您还可以按地标导航。 由于<section>具有“区域”角色，并且区域是地标，我可以使用 JAWS 使用R键通过地标导航，当我这样做时，我听到“这是我想要阅读的文本区域” ，无论我的详细设置如何。

因此，正如其他人发布的那样，如果您使用“标准”屏幕阅读器，则会读取标签。 如果您使用鲜为人知的屏幕阅读器，则很难说会发生什么。

关于aria-description ，那还不是生产。 它是仍处于草案形式的 ARIA 1.3 规范的一部分。 生产 ARIA 1.2 没有aria-description所以它会被读取是值得怀疑的。