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
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.