E-mail List Archives
Thread: Tables with a checkbox column
Number of posts in this thread: 8 (In chronological order)
From: James Kennard
Date: Fri, Mar 26 2010 10:12AM
Subject: Tables with a checkbox column
No previous message | Next message →
Hi,
I have a table which includes a <thead> and a bunch of <th> cells. The
left most column contains checkboxes (one per row) and is used to select
rows. I currently have no content in the left most <th> cell. Is this
considered accessible? If not what is the best practice for this type of
thing, it must be quite a common scenario.
thanks
james.
SciSys UK Limited. Registered in England and Wales No. 4373530.
Registered Office: Methuen Park, Chippenham, Wiltshire SN14 0GB, UK.
* Before printing, please think about the environment.
From: Simius Puer
Date: Fri, Mar 26 2010 1:39PM
Subject: Re: Tables with a checkbox column
← Previous message | Next message →
Hi James
That kind of depends on what you are doing - I'm guessing it is a form, and
if so you should really use CSS rather than tables to lay it out.
If you post some more detail I am sure you will get more helpful and
detailed responses.
From: E.J. Zufelt
Date: Fri, Mar 26 2010 1:51PM
Subject: Re: Tables with a checkbox column
← Previous message | Next message →
Good afternoon James,
Not having specific details about the purpose of the table it is difficult to make any recommendations.
In general I would recommend that at the least the title attribute of the checkbox be set to correspond to the purpose of the checkbox. For example if each row of the table represented a fruit, then the title of the checkbox might be title="Select apple".
Thanks,
Everett Zufelt
http://zufelt.ca
Follow me on Twitter
http://twitter.com/ezufelt
View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt
On 2010-03-26, at 2:40 PM, Simius Puer wrote:
> Hi James
>
> That kind of depends on what you are doing - I'm guessing it is a form, and
> if so you should really use CSS rather than tables to lay it out.
>
> If you post some more detail I am sure you will get more helpful and
> detailed responses.
>
>
From: Jukka K. Korpela
Date: Sun, Mar 28 2010 6:06AM
Subject: Re: Tables with a checkbox column
← Previous message | Next message →
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/
From: James Kennard
Date: Mon, Mar 29 2010 2:45AM
Subject: Re: Tables with a checkbox column
← Previous message | Next message →
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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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/
From: Simius Puer
Date: Mon, Mar 29 2010 7:24AM
Subject: Re: Tables with a checkbox column
← Previous message | Next message →
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
From: Langum, Michael J
Date: Mon, Mar 29 2010 7:57AM
Subject: Re: Tables with a checkbox column
← Previous message | Next message →
I agree that (short of a smarter design) the best option is to associate <label> tags with each checkbox.
-- Mike
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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/
From: James Kennard
Date: Mon, Mar 29 2010 8:09AM
Subject: Re: Tables with a checkbox column
← Previous message | No next message
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 ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS 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