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