WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: aria-label vs. aria-labelledby

for

From: Tim Harshbarger
Date: May 7, 2019 7:00AM

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 REMOVED> > On Behalf Of Wee, Kim (MNIT)
Sent: Tuesday, May 7, 2019 6: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