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

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.