A11Y - 屏幕 reader 没有读取 `aria-description` 标签

Question

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

<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>

该部分不可标记，因为它不是 link，不确定这是否与问题有关，但我对屏幕 reader 是否应该阅读的理解有些东西充其量只是粗略的。

屏幕 reader 有问题，如果它重要的话。

感谢任何帮助。

Answer 1

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

所以，符合标准的屏幕 reader 应该可以阅读它，据我测试，他们确实可以阅读。

属性 aria-description 比 aria-label 更新，因此您应该更喜欢 aria-label 以最大限度地提高阅读机会。

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

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

Answer 2

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

如果您可以使用 tab 键导航至 <section> 之前的可聚焦元素，则您可以开始使用向下箭头进入该部分。

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

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

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

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

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

A11Y - Screen reader doesn't read `aria-description` tag