WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with a checkbox column

for

From: James Kennard
Date: Mar 29, 2010 8:09AM

Andrew thanks for the *very* comprehensive response :)

I will try all your suggestions. I wonder if anyone has a screen wide
enough to display -10000px... lol. And thanks for pointing out that the
location of the first column may not be as appropriate for users using
accessibility software, will have to look into this further.

thanks again!

james.

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Simius Puer
Sent: 29 March 2010 13:25
To: WebAIM Discussion List
Subject: Re: [WebAIM] Tables with a checkbox column

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