WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: textbox in table cell

for

From: Jukka K. Korpela
Date: Mar 26, 2008 3:30PM

Lee, Samson (HRSA) [C] wrote:

> I have a data table, which has some textboxes like this:

As usual, a URL would make the situation clearer, but it seems that this
a problem that has been discussed a few times. You have table of input
fields (it's often radio buttons, but here text fields) so that the
meaning of each field is to be inferred from the column and row headers.

It's this basic structure that creates accessibility problems. Even if
you could make speech browsers read those headers for each field, what
about the over 99% of users who use "normal" browsing?

> <tr>
> <th scope="row">Heart Disease</th>
> <td><input type="text" size="3" id="tbHLevel1" /></td>
> <td><input type="text" size="3" id="tbHLevel2" /></td>
> <td><input type="text" size="3" id="tbHLevel3" /></td>
> </tr>

This isn't accessible, even if you have column headers so that a small
fraction of users will hear or see the association. Just put labels for
each field there, together with <label> markup. Better still, modify the
structure so that you have one label and its field on one line. For
example, using

<fieldset><legend>Heart Disease</legend>
<div><label ...>...</label> <input ...></div>
...
</fieldset>

or perhaps a two column table inside the fieldset.

> My question: <td>s are all accessible because row headers and column
> headers are all set.

No they aren't. Such association would benefit a tiny fraction of users
only. It would be useful to have the association, of course, _if_ you
_had_ to have the table structure you have. But you don't.

It's essential to realize that web forms are not paper forms and should
not imitate them and should not be written compactly to save paper,
since no paper is involved. One item per line is fine.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/