The
aria-labelandaria-labelledbyattributes do the same thing but in different ways. Sometimes the two attributes are confused and this has unintended results. This post describes the differences between them and how to choose the right one.
The key takeaways for me were:
- Many HTML elements have an accessible name (which we can think of as its “label”) and this can be derived from the element’s content, an attribute, or from an associated element;
- for
aria-labelledby, use theidof another element and that will then use that element’s text as your first element’s accessible name; - use native HTML over ARIA where possible, but when you need ARIA it’s better to reuse than duplicate so if an appropriate label already exists in the document use
aria-labelledby; otherwise usearia-label; - an ARIA attribute will trump any other accessible name (such as the element’s content)
- there are some elements on which these ARIA attributes do not work consistently so check these before using.