E-mail List Archives

Search E-mail List Archives for

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

From: Angela French
Date: Mon, Jul 22 2013 3:30PM
Subject: example use of aria-labelledby
No previous message | Next message →

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 ADDRESS REMOVED =
http://www.checkoutacollege.com/
http://www.sbctc.edu

From: Birkir R. Gunnarsson
Date: Mon, Jul 22 2013 5:47PM
Subject: Re: example use of aria-labelledby
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED =
> http://www.checkoutacollege.com/
> http://www.sbctc.edu
>
> > > >