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