当标签和输入存在“for”和“id”关联时，是否需要 aria-labelledby？

Question

以下是 Adobe Spectrum 的文本字段组件的 html 结构：https://react-spectrum.adobe.com/react-spectrum/TextField.html

for

上有

<label>

属性，

id

上有

<input>

属性，可让屏幕阅读器在输入聚焦时读出标签。那么为什么这里的 aria-labelledby 是必要的呢？根据他们的文件，它指出 “如果未指定可见标签，则必须向 TextField 提供 aria-label 以实现可访问性。如果该字段由单独的元素标记，则必须使用标签元素的 id 提供 aria-labelledby 属性。 ” 但

for

和

id

关联还不够吗？

<div class="A-HlBa_spectrum-Field A-HlBa_spectrum-Field--positionTop YO3Nla_spectrum-Textfield-wrapper">
  <label id="react-aria3159902326-:r2i:" class="A-HlBa_spectrum-FieldLabel" for="react-aria3159902326-:r2h:">Name</label>
  <div class="YO3Nla_spectrum-Textfield YO3Nla_spectrum-FocusRing YO3Nla_spectrum-FocusRing-ring A-HlBa_spectrum-Field-field">
    <input type="text" id="react-aria3159902326-:r2h:" aria-labelledby="react-aria3159902326-:r2i:" class="YO3Nla_spectrum-Textfield-input YO3Nla_i18nFontFamily" value="">
  </div>
</div>

Answer 1

你是对的。当字段已经有关联标签时，不需要 aria-label 和 aria-labelledby。

按照 ARIA 规则，

• 除非确实需要，否则不应该使用 ARIA
• 你不应该用 ARIA 覆盖已经隐含的或由其他方式给出的内容

这里，aria-labelledby 显然是多余的，所以应该删除。

事实上，冗余可能是有害的。带有或不带有 ARIA 的元素有时会表现得略有不同，并且会在可访问的名称计算中调用错误或不需要的结果。 通常，ARIA 优先，但这只是标准。屏幕阅读器并不总是完全遵守标准。

他们的文档指出，当没有可见标签时，需要 aria-label 或 aria-labelledby。 这或多或少也是 WCAG 所说的。 这里所说的可见，你必须理解为屏幕阅读器可见，不一定在屏幕上可见。

作为他们自己的文档的配对，他们不应该在这里包含该咏叹调标签。 如果代码是机器生成的，他们应该改进算法，以便仅在真正必要时才包含 aria-label / aria-labelledby。