WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: example use of aria-labelledby

for

From: Birkir R. Gunnarsson
Date: Jul 22, 2013 5:47PM

Hey

What you must keep in mind, and what makes this a bit tricky, is that
aria overrides native semantics.
In this case, aria-labelledby="x" will override any other valid label.
You need to include that label in the aria-labelledby string
aria-labelledby="x y"
will speak both x and y.
So if you label something tith a traditional label, you must make sure
to give that label its unique id and to include it in the
aria-labelledby string.
Rewriting your code from your email:

<p id="children">Provide the names of your children in the order of birth</p>
<!-- Reads only the children tag with screen readers-->
<label id="child1lbl" for="child1">First Child</label>
<input type="text" id="child1" aria-labelledby="children">
<!-- Reads children and child2 label-->
<label id="child2lbl" for="child2">Second Child</label>
<input type="text" id="child2" aria-labelledby="children child2lbl">
<!-- Reads children, child2 and child3 values-->
<label id="child3lbl" for="child3">Third Child</label>
<input type="text" id="child3" aria-labelledby="children child2lbl child3lbl">

I am suffering from the height of laziness, so I am not going to look
up the page, but Marco Zehe has a pretty good example of simple use of
aria-labelledby and aria-describedby.
Just google Marco aria easy tip 2 aria-labelledby

Hth
-B
Birkir Gunnarsson| Accessibility Subjectmatter Expert
Deque Systems

On 7/22/13, Angela French < <EMAIL REMOVED> > wrote:
> Hello,
> I am trying to find a good real-word use of aria-labelledby. The examples I
> found seemed like they were just substituting the use of ARIA for the html
> <label> tag. I wrote this one and wondering if I'm getting the use of this
> ARIA attribute correctly.
>
> <p id="children">Provide the names of your children in the order of
> birth</p>
> <label id="child1">First Child</label><input type="text" for="child1"
> aria-labelledby="children">
> <label id="child2">Second Child</label><input type="text" for="child2"
> aria-labelledby="children">
> <label id="child3">Third Child</label><input type="text" for="child3"
> aria-labelledby="children">
>
>
> Thanks,
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED>
> http://www.checkoutacollege.com/
> http://www.sbctc.edu
>
> > > >