tl;dr
When it comes to deciding which attribute to use, aria-label vs. aria-labelled-by, consider these things:
- Do you need to use ARIA?
- If yes, does the text already exist elsewhere in the document?
- If yes, use
aria-labelledby; if no, usearia-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.
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.