WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with a checkbox column


From: Simius Puer
Date: Mar 29, 2010 7:24AM

Hi James

The empty cell is relatively easy to deal with - you can add some useful
text for screen-readers and hide it from sighted users using CSS (obviously
you need to use an accessible method of hiding text

As you quite rightly suggest, you also need explicitly associate the input
button with the most relevant table cell. See
http://www.usability.com.au/resources/forms.cfm#labelling for a nice clear
guide on this.

Also, you have the input field first which can cause confusion for
non-sighted users who are being asked to make a decision prior to being
given any information. Ideally this should be the last column in the table
in terms of the HTML - you can always move it back to the fist position
using CSS if you don't want to alter the layout visually.

A few additional pointers:

1. You could add a table "summary". This should cover the *content* and
*structure* as concisely as possible. e.g. "A table of [whatever] using
a single header row and a selection field in the first column". This would
help screen-reader users.
2. You could use a table "caption". This is a good technique as it
displays the description of the table (content only - you would then remove
this bit from the "summary" to avoid duplication) to all users, not just
those using screen-readers. This can help boost the comprehension of the
page for a wider range of people.
3. Add scope="col" to your <th>s. If you ever need to use more complex
table then use id's & headers.