问题
Is there any guidance on when to choose aria-describedby instead of aria-labelledby?
Reading the MDN guidance on the two attributes, I get the feeling they are similar and interchangeable. Both seem to suggest that they can be used for input labels and other content but many compliance tools do not seem to like aria-describeby on input tags. I hate applying a particular attribute blindly just because a tool says I should and I would prefer to know something concrete about the when and why
Here are the entries on MDN regarding the two aria attributes in question:
aria-labelledby attribute
aria-describedby attribute
回答1:
They are indeed very similar, there is one key distinction.
aria-labelledby
aria-labelledby will overwrite any existing labelling including any semantically derived label.
For example if you had a <button> and used aria-labelledby the button text would be overwritten by the first item you listed as the label.
In the following example if you tab to the button (using the mouse over will read the button text in some screen readers) it will read "first label" then "Further information" instead of "this text will not be read".
<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 on the other hand will read the linked information as additional information. It will read this after the button semantically derived information.
So in the below example it will read "This text will now be read", "first label" then "Further information". Yet again you need to focus the button (not mouse over) to see this behaviour.
<button aria-describedby="lbl1 lbl2">This text will now be read</button>
<p id="lbl1">first label</p>
<p id="lbl2">Further information</p>Limitations
Warning - support for aria-labelledby and aria-describedby is really not as good as you might think.
If information is truly important (i.e. the element will not make sense without it) then you should revert to using visually hidden text instead.
I have a Stack Overflow answer on the class you should use for visually hidden text instead of the built in sr-only class in most libraries.
Please note there are certain times you cannot use this (i.e. within a <select>s <option>, but for essential information this is the only 100% supported way to do it (all the way back to 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>回答2:
Regardless of technical differences, or level of support (which Graham has covered very well), there is a semantic difference. A label is not a description. In the MDN pages you linked to, it states:
A label provides essential information about an object, while a description provides extended information that the user might need.
The key semantic difference is the word "extended", or as w3c puts it:
a label should be concise, where a description is intended to provide more verbose information
So, labels are used for controls like "Quit" or "Cancel", or brief text labels, such as product names, whereas descriptions tend to be lengthier, containing more detail, or providing a higher-level, general interpretation of the content.
Example: I've recently been using aria-labelledby to refer to a legend. The legend is just a list, where each list item has an id. Then, elsewhere on the same page, in a chart or table, or even another list, I use aria-labelledby to point to the corresponding legend item. This decouples the legend from the data, and allows the same legend to be reused on multiple charts, table headers, figures, diagrams or whatever.
As an added bonus, you can CSS select items with a given aria-labelledby value (using an attribute selector such as th:[aria-labelledby='tableLabelFurry']) and style all elements that use this label in a consistent way.
Here's some sample code which shows two separate tables, whose headers are derived from a legend:
* {
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-labeledby="tableLabelNumLegs"></th>
<th scope="col" aria-labeledby="tableLabelFamily"></th>
<th scope="col" aria-labeledby="tableLabelFurry"></th>
</tr>
<tr>
<th scope="row">Flea</th>
<td>6</td>
<td aria-labledby="test">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-labeledby="tableLabelNumLegs"></th>
<th scope="col" aria-labeledby="tableLabelFamily"></th>
<th scope="col" aria-labeledby="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>aria-describedby might instead be used to give a general description of the content.
According to the spec, both attributes can contain references to more than one id, but I would recommend careful testing with a range of ATs and browsers if you intend to do this.
来源：https://stackoverflow.com/questions/63002101/is-there-any-guidance-on-when-to-choose-aria-describedby-instead-of-aria-labelle