WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jan 10, 2017 7:22AM

You're always welcome.


On 1/10/17, Brandon Keith Biggs < <EMAIL REMOVED> > wrote:
> 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.
>> >
>> >
>> >
>> >