accessibility - 是否有关于何时选择 aria- describeby 而不是 aria-labelledby 的指导？

Question

是否有关于何时选择 aria- describeby 而不是 aria-labelledby 的指导？

阅读关于这两个属性的 MDN 指南，我感觉它们是相似且可以互换的。 两者似乎都表明它们可用于输入标签和其他内容，但许多合规工具似乎不喜欢输入标签上的 aria-describeby。我讨厌仅仅因为一个工具说我应该盲目地应用一个特定的属性，而且我更愿意知 Prop 体的时间和原因

以下是 MDN 上有关两个 aria 属性的条目:

aria-labelledby attribute

aria-describedby attribute

Answer 1

它们确实非常相似，只有一个关键区别。

aria-labelledby

aria-labelledby将覆盖任何现有标签，包括任何语义派生标签。

例如，如果您有一个 <button>并使用了aria-labelledby按钮文本将被您列为标签的第一项覆盖。

在下面的示例中，如果您选择按钮(在某些屏幕阅读器中使用鼠标悬停会读取按钮文本)，它将读取“第一个标签”，然后是“更多信息”而不是“不会读取此文本” .

<button aria-labelledby="lbl1 lbl2">This text will not be read</button>
<p id="lbl1">first label</p>
<p id="lbl2">Further information</p>

aria-describedby

aria-describedby另一方面，将链接信息作为附加信息读取。它会在按钮语义派生信息之后读取此信息。

所以在下面的示例中，它将显示“现在将读取此文本”、“第一个标签”然后是“更多信息”。再次，您需要聚焦按钮(而不是鼠标悬停)才能看到这种行为。

<button aria-describedby="lbl1 lbl2">This text will now be read</button>
<p id="lbl1">first label</p>
<p id="lbl2">Further information</p>

限制

警告 - support for aria-labelledby and aria-describedby 真的没有你想象的那么好。

如果信息真的很重要(即元素没有它就没有意义)，那么您应该改用视觉隐藏文本。

我有一个 Stack Overflow answer on the class you should use for visually hidden text instead of the built in sr-only class in most libraries.

请注意，在某些情况下您不能使用它(即在 <select> s <option> 内，但对于基本信息，这是唯一 100% 支持的方式(所有回到IE6)

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<button>This text will now be read <span class="visually-hidden">,first label</span> <span class="visually-hidden">,Further information</span></button>