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 6:29AM

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.
>
>
>
>