WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using labels or table headers on nested editable elements inside data cells?

for

From: Brandon Keith Biggs
Date: Jan 10, 2017 6:51AM

Hello,
Thank you for this! I will use aria-labeledby from now on!
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Tue, Jan 10, 2017 at 5:29 AM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Hi
> Table association is not a valid source of a form field's accessible
> name, per the accessible name calculation algorithm.
> NVDA decides to be smart and guess it, and it guesses it correctly,
> but it is not reliable enough to pass WCAG 4.1.2.
> You can fix this by:
> 1. Adding unique id attributes to the th cells.
> 2. Referncing those ids using aria-labelledby from the <input> elements:
>
> <table>
> <theader>
> <tr>
> <th id="name1">name</th>
> <th id="age1">age</th>
> </tr>
> </theader>
> <tbody>
> <tr>
> <td><input type="text"> aria-labelledby="name1"</td>
> <td><input type="number" aria-labelledby="age1"></td>
> </tr>
>
> <tr>
> <td><input type="text" aria-labelledby="name1"></td>
> <td><input type="age" aria-labelledby="age1"></td>
> </tr>
> </tbody>
> </table>
> If the table has a common group label, you can even associate it by
> making the table into a group and using aria-labelledby to assign a
> common name to it.
> <h2 id="teamInfo">Please enter the names and ages of people in your
> team</h2>
>
> <table role="group" aria-labelledby="teamInfo">
> <theader>
> <tr>
> <th id="name1">name</th>
> <th id="age1">age</th>
> </tr>
> </theader>
> <tbody>
> <tr>
> <td><input type="text"> aria-labelledby="name1"</td>
> <td><input type="number" aria-labelledby="age1"></td>
> </tr>
>
> <tr>
> <td><input type="text" aria-labelledby="name1"></td>
> <td><input type="age" aria-labelledby="age1"></td>
> </tr>
> </tbody>
>
>
>
>
> On 1/10/17, JP Jamous < <EMAIL REMOVED> > wrote:
> > Brandon,
> >
> > I agree with Birkir on this one. ARIA will override HTML as far as screen
> > readers are concerned.
> >
> >
> >
> >