When to use aria-label vs. aria-labelledby?

Question

When to use the aria-label attribute vs. the aria-labelledby attribute?

Answer

The aria-label attribute allows for naming an element without a visual representation of that name. aria-label should be used when there is not visible text that would be an appropriate name for the element. On the other hand, the aria-labelledby attribute is used to reference visible text to be used as the accessible name. Essentially, aria-label should be used when there is not already a visible label and you do not want to create one, while aria-labelledby should be used when there is already a visible label. aria-labelledby should reference the ID of the element that holds the name you’d like to label the element of interest with. For example:

<span id=”night-mode-label”>Night mode</span>
<span role=”switch” aria-checked=”false” tabindex=”0” aria-labelledby=”night-mode-label”></span>

Example and information source: https://w3c.github.io/aria-practices/#naming_with_aria-labelledby

Need help monitoring your website for accessibility issues?

Perform up to 10,000 free accessibility scans with a trial of Accessible Web Console.