The difference between aria-label and aria-labelledby (Tink - Léonie Watson)

Direct Link

The aria-label and aria-labelledby attributes 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 the id of 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 use aria-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.
External Link Bookmark Note Entry Search