aria-label vs. aria-labelled-by

Shared by
Published

Léonie Watson over at Tink did a great write-up on the differences of aria-label vs. aria-labelled-by. Learn when you should them, which to use, and what they do.

tl;dr

When it comes to deciding which attribute to use, aria-label vs. aria-labelled-by, consider these things:

  1. Do you need to use ARIA?
  2. If yes, does the text already exist elsewhere in the document?
  3. If yes, use aria-labelledby; if no, use aria-label.

The first question references the First Rule of ARIA:

If you can use a native HTML element or attribute with the semantics and behaviour you require already built-in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so.

w3.org, First Rule of ARIA Use

There are ways an element can be given an accessible name without using aria-label or aria-labelledby. For example, put text inside a link or button, use the alt attribute to give an image a text description, or match the for attribute on a label element with the id attribute of the form field it relates to.

If you think ARIA is the right solution, then the second question is whether the piece of text already exists in the document. Generally speaking it’s better to reuse than duplicate, so using aria-labelledby to associate the piece of text with the element makes sense if the text already exists. If it does not exist elsewhere, then use aria-label.

Join the conversation.

Your email address will not be published.

All comments posted on 'aria-label vs. aria-labelled-by' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.