WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with a checkbox column

for

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
http://www.webaim.org/techniques/css/invisiblecontent/).

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.

Regards