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.
>
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Brandon Keith Biggs
> Sent: Tuesday, January 10, 2017 7:10 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Using labels or table headers on nested editable
> elements inside data cells?
>
> Hello,
> I didn't explain what I meant well.
> These are not layout tables, they are data tables. Here is an example of a
> table that looks awesome to a screen reader, but does not pass WCAG:
>
> <table>
> <theader>
> <tr>
> <th>name</th>
> <th>age</th>
> </tr>
> </theader>
> <tbody>
> <tr>
> <td><input type="text"></td>
> <td><input type="number"></td>
> </tr>
>
> <tr>
> <td><input type="text"></td>
> <td><input type="age"></td>
> </tr>
> </tbody>
> </table>
>
>
> In order to make it pass WCAG, one needs to add labels to each edit box
> which would then make the title of the edit box read twice, reducing the
> user experience for me as the screen reader user.
>
>
> <table>
> <theader>
> <tr>
> <th>name</th>
> <th>age</th>
> </tr>
> </theader>
> <tbody>
> <tr>
> <td><label for="n1">Name</label><input id="n1" type="text"></td> <td><label
> for="a1">Age</label><input id="a1" type="number"></td> </tr>
>
> <tr>
> <td><label for="n2">Name</label><input id="n2" type="text"></td> <td><label
> for="a2">Age</label><input id="a2" type="age"></td> </tr> </tbody> </table>
>
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
> On Tue, Jan 10, 2017 at 1:17 AM, JP Jamous < <EMAIL REMOVED> > wrote:
>
>> Brandon,
>>
>> I understand why you like liquid tables. I used to love them because
>> you know the browser will adjust everything automatically and no need
>> to be concerned with CSS or cross-browser compatibility. However, I do
>> not recommend you use table headings in layout tables. Use table
>> headings only in data tables.
>>
>> So you can construct your table without the TH and assign a label to
>> each form element. You would pass WCAG, "Label all form elements", and
>> ensure proper readability with screen readers.
>>
>> It's that simple. Layout tables should never contain table headings.
>> Just remember that. Problem solved.
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>> Behalf Of Brandon Keith Biggs
>> Sent: Tuesday, January 10, 2017 2:47 AM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: [WebAIM] Using labels or table headers on nested editable
>> elements inside data cells?
>>
>> Hello,
>> I am wondering what should be done in this situation.
>> If one has a table that is properly using the <th> tags at the top,
>> then all cells below will inherit the heading. This means edit boxes
>> and whatnot don't need any label because the header already is the label.
>> This is how I mostly program tables because it is the easiest and NVDA
>> likes it the most. But it fails accessibility tests because the edit
>> boxes don't have a label.
>>
>> If one adds a label to the field then NVDA announces the title of the
>> field twice and the edit fields don't pass because they are not unique.
>> (This functionality is not just NVDA either).
>>
>> So what should one do in this situation? For me as an NVDA user, I
>> really like edit boxes without labels if tables have their headers
>> correct. But the WCAG guidelines don't agree with me.
>> What should be done?
>> Thanks,
>>
>> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.