WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-label vs. aria-labelledby

for

From: joe@a11yeval.com
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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Wee, Kim (MNIT)
Sent: Tuesday, May 7, 2019 7:57 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] aria-label vs. aria-labelledby

We have an application page which contains a table with three columns, "Actions", "User ID" and "Full Name".

The first row contains two links, "Add User Role" and "Review" under the Actions header, "kim" under the User ID header and "Kim Wee" under the Full Name header.

According to the Aria specifications, shouldn't aria-labelledby be used to add the name to the Add User Role and Review links? And if so, why does aria-label work and read appropriately? Could this cause other issues?

Thank you

Kim Wee, CPWA
Webmaster and Accessibility Coordinator | Operations Team Minnesota IT Services | Partnering with Education
1500 Highway 36
Roseville, MN 55113
O: 651-582-8548
Information Technology for Minnesota Government | mn.gov/mnit