When it comes to deciding which attribute to use,
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, use
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-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