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