WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-label vs. aria-labelledby

for

From: joe
Date: May 7, 2019 7:10AM

Hi Kim,

In quite a few use cases, aria-labelledby and aria-label can be used interchangeably to get the same results. They are both used to override or provide the accessible name of an element. However, these attributes should be used cautiously because you may remove and not replace visual information for those links that could violate WCAG 2.1 SC 2.5.3 A Label in Name (https://www.w3.org/TR/WCAG21/#label-in-name).

In the use case you are talking about, in my opinion, using aria-describedby would be more appropriate because it would automatically retain the visible text label (e.g., Add User Role) as part of the accessible name while adding the name as the accessible description.

Either aria-labelledby or aria-label could be used to get similar and accessible results, but in a different way. If you were to use aria-labelledby, you would need to point to the ID of original link itself and the ID of the "name" text element, otherwise part of the complete accessible name would be missing.

The reason the aria-label works is because, for supported assistive technology, it completely replaces the accessible name for the element to which it is added as an attribute making this attributes value the accessible name. The aria spec make recommendations ("Should" not "must") about the aria-labelledby & aria-label elements. The spec recommends that if the text that represents the accessible name is visible use aria-labelledby and if the text that represents the accessible name is not visible use aria-label. My assumption about this recommendation is that it will help avoid inaccurate labels if the content of the page changes because the aria-labelledby attribute would pick up any changes to the elements referenced by their ID automatically where as an aria-label is static and would have to be changed manually or through scripting.

Hopefully this helps.

Joe Humbert