When to use aria-label vs. aria-labelledby?
Question
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