WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with a checkbox column

for

From: Langum, Michael J
Date: Mar 29, 2010 7:57AM

I agree that (short of a smarter design) the best option is to associate <label> tags with each checkbox.

-- Mike


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of James Kennard
Sent: Monday, March 29, 2010 3:46 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Tables with a checkbox column


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/