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