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:10AM

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/>;
> > > at http://webaim.org/discussion/archives
> >
> > > > >