关于何时选择describedby而不是labeledby的咏叹调，有什么指导吗？
阅读MDN关于这两个属性的指南，我感觉它们相似且可互换。两者似乎都表明它们可以用于输入标签和其他内容，但许多合规工具似乎不喜欢输入标签上的aria describeby。我讨厌盲目地应用特定的属性，因为一个工具说我应该，我更想知道的具体时间和原因
以下是MDN上关于两个有问题的aria属性的条目：
由属性标记的aria
属性描述的aria
它们确实非常相似，有一个关键区别。
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>限制
警告-对aria-labelledby和aria-describedby的支持确实没有您想象的那么好。
如果信息真的很重要(即没有它元素就没有意义(，那么您应该恢复使用视觉隐藏文本。
我有一个关于类的Stack Overflow答案，该类应该用于可视化隐藏文本，而不是大多数库中的内置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>无论技术差异或支持级别(Graham已经很好地涵盖了这一点(如何，都存在语义差异。标签不是描述。在您链接到的MDN页面中，它显示：
标签提供了有关对象的基本信息，而描述提供了用户可能需要的扩展信息。
关键的语义差异是单词"扩展"；，或者正如w3c所说：
标签应该简洁，其中的描述旨在提供更详细的信息
因此，标签用于控件，如"；退出"；或"；取消"；，或简短的文本标签，如产品名称，而描述往往更长，包含更多细节，或对内容提供更高层次的一般解释。
示例：我最近一直在使用aria-labelledby来引用图例。图例只是一个列表，每个列表项都有一个id。然后，在同一页的其他地方，在图表或表格中，甚至在另一个列表中，我使用aria-labelledby指向相应的图例项。这将图例与数据解耦，并允许在多个图表、表头、图表、图表或其他任何内容上重用同一图例。
作为额外的奖励，您可以使用CSS选择具有给定aria-labelledby值的项目(使用属性选择器，如th:[aria-labelledby='tableLabelFurry'](，并以一致的方式对使用该标签的所有元素进行样式设置。
下面是一些示例代码，其中显示了两个独立的表，它们的标题源自一个图例：
* {
box-sizing:border-box;
}
html {
background:gray;
}
body {
padding: 1.5rem;
background:white;
font-family:sans-serif;
}
main[role='main'] {
width: 10rem;
max-width: 18rem;
padding: 1.5rem;
margin: auto;
background:silver;
}
table th, table td {
padding:1em;
width:10em;
border:1px solid pink;
}
ol {
margin-left:10em;
}
ol li {
display:inline-block;
padding:1em;
width:10em;
}<h1>Two tables sharing headers (legend implementation)</h1>
<ol id="legend">
<li id="tableLabelNumLegs">Legs</li>
<li id="tableLabelFamily">Order</li>
<li id="tableLabelFurry">Furry?</li>
</ol>
<h2>woot</h2>
<table>
<caption>Common Animals</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col" aria-labelledby="tableLabelNumLegs"></th>
<th scope="col" aria-labelledby="tableLabelFamily"></th>
<th scope="col" aria-labelledby="tableLabelFurry"></th>
</tr>
<tr>
<th scope="row">Flea</th>
<td>6</td>
<td>Siphonaptera</td>
<td>A bit</td>
</tr>
<tr>
<th scope="row">Frog</th>
<td>4</td>
<td>Anura</td>
<td>No</td>
</tr>
</tbody>
</table>
<hr />
<table>
<caption>Rare animals</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col" aria-labelledby="tableLabelNumLegs"></th>
<th scope="col" aria-labelledby="tableLabelFamily"></th>
<th scope="col" aria-labelledby="tableLabelFurry"></th>
</tr>
<tr>
<th scope="row">Tiger</th>
<td>4</td>
<td>Carnivora</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Panda</th>
<td>4</td>
<td>Carnivora</td>
<td>Yes</td>
</tr>
</tbody>
</table>CCD_ 16可以替代地用于给出内容的一般描述。
根据规范，这两个属性都可以包含对多个id的引用，但如果您打算这样做，我建议您使用一系列AT和浏览器进行仔细测试。