E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Wee, Kim (MNIT)
Date: Tue, May 07 2019 5:57AM
Subject: aria-label vs. aria-labelledby
No previous message | Next message →

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

From: Tim Harshbarger
Date: Tue, May 07 2019 7:00AM
Subject: Re: aria-label vs. aria-labelledby
← Previous message | Next message →

You should be able to use aria-labelledby and aria-label interchangeably. They accomplish exactly the same thing, just using different methods.

For example, the following 2 examples would produce a textfield with the accessible name of "Enter a code:"

<span id="label1">Enter a code:</span>
<input type="text" aria-labelledby="label1">

<input type="text" aria-label="Enter a code:">

Whether someone uses aria-labelledby or aria-label typically depends on which one they find easier to implement for the given situation.

The one thing to keep in mind is that both aria-labelledby and aria-label willl completely overwrite whatever accessible name the element had.

<a href="#" aria-label="Row 1">View Details</a>

Would be read by a screen reader as "link Row 1" not "link View Details Row 1".

I hope that helps!

Thanks!
Tim
Tim Harshbarger
Senior Accessibility Consultant
Deque Systems

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Wee, Kim (MNIT)
Sent: Tuesday, May 7, 2019 6:57 AM
To: = EMAIL ADDRESS 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

From: joe@a11yeval.com
Date: Tue, May 07 2019 7:10AM
Subject: Re: aria-label vs. aria-labelledby
← Previous message | No next message

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 ADDRESS REMOVED = > On Behalf Of Wee, Kim (MNIT)
Sent: Tuesday, May 7, 2019 7:57 AM
To: = EMAIL ADDRESS 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