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

Question

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

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

以下是 MDN 上关于相关两个 aria 属性的条目：

aria-labelledby 属性

aria-由属性描述

Answer 1

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

aria-labelledby

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

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

在下面的示例中，如果您按 Tab 键定位到按钮（使用鼠标悬停将在某些屏幕阅读器中读取按钮文本），它将读取“第一个标签”，然后读取“更多信息”，而不是“不会读取此文本”。

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

局限性

警告-对和 的支持aria-labelledbyaria-describedby实际上并不像您想象的那么好。

如果信息确实很重要（即没有它，元素​​就没有意义），那么您应该恢复使用视觉上隐藏的文本。

我有一个关于应该用于视觉隐藏文本的类的堆栈溢出答案，而不是大多数库中的内置sr-only类。

请注意，有时您无法使用此功能（即在<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>