WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with a checkbox column

for

From: James Kennard
Date: Mar 29, 2010 2:45AM


Okay it seems that my original email wasn't very explanatory... I'll try
again ;)

1. The information is in a table because it is tabulated paginated data
- it definitley belongs in a table.
2. I can't post a URL because it is not currently accessible to the
outside world.
3. The HTML looks something like this (note that I have a number of
these tables throughout an application):

<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="item" value="1"></td>
<td>Some name</td>
<td>Some description</td>
<td>Some author</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="2"></td>
<td>Some other name</td>
<td>Some other description</td>
<td>Some other author</td>
</tr>
<tr>
<td><input type="checkbox" name="item" value="3"></td>
<td>Yet another name</td>
<td>Yet another description</td>
<td>Yet another author</td>
</tr>
</tbody>
</table>

4. I can see one main failure in relation to WCAG 2.0: There is no way
of programatically determining the purpose of the checkboxes because:
4a. The first <th> element is empty
4b. There is are no labels for the checkboxes

So the question really is what is the best solution. I'm not keen on
sticking a value into the first <th> element because there isn't much
space for the table and will squash it horribly (sorry can't change
this, not my design). I thought that if I were to wrap the value in the
"Name" column with a <label> and associate it with the checkbox that
this would resolve the issue?

I would have thought this was quite a common design scenario - you tend
to see this sort of thing in backend applications all the time.

thanks for your input!

james.

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Jukka K.
Korpela
Sent: 28 March 2010 12:05
To: WebAIM Discussion List
Subject: Re: [WebAIM] Tables with a checkbox column

James Kennard wrote:

> I have a table which includes a <thead> and a bunch of <th> cells.

This sounds odd. Do you mean the <thead> element contains lots of <th>
cells in several rows, as the sequel suggests? Why? Why not post a URL?

> The left most column contains checkboxes (one per row) and is used to
> select rows.

Checkboxes as such don't select anything. There must be some server-side
or client-side programming involved. This in turn might imply serious
accessibility issues. Why not post a URL?

> I currently have no content in the left most <th> cell.

That's very odd, unless you mean that it has no content _except_ a
checkbox, in which case it's "just" an issue.

> Is this considered accessible?

No, it is considered inaccessible. It even violates the technical
requirement of always associating a "control" (input field) with a
label.
Don't the rows have any identifying text saying what the row is about?
Then that would be an accessibility problem even irrespectively of any
checkboxes.

> If not what is the best practice for
> this type of thing, it must be quite a common scenario.

We don't know what "this type of thing" really is, in the absence of a
URL.

If the idea is that the user can select some of the rows for processing,
then it is surely relevant to know what the rows are. You might think
that the nature of a row can immediately be seen by looking at the
table, then your assumptions fail, for example, when the user cannot see
anything.

In the absence of any logical row header (do you really have a tabular
data structure then?), you could introduce enumerative labels like 1, 2,
3 etc.
or a, b, c etc. This would let you satisfy the technical requirement of
associating a label with a field, but would it really make the page more
accessible? Consider a person "viewing" the page with a browser that
reads its content in a linearized manner. He would have decide whether
to check the checkbox or not solely on the basis of the row number (or,
in your current design, without any information about its meaning).

P.S. Did I mention that the URL would enable us to consider the _real_
problem?

--
Yucca, http://www.cs.tut.fi/~jkorpela/