WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form labeling question

for

From: Steve Green
Date: Mar 21, 2008 12:40PM

I have encountered this kind of form several times during user testing, and
it is incomprehensible to even a highly experienced screen reader user if it
is marked up as a table.

This has been discussed several times on GAWDS and WSG, and the consensus
was that it is best to implement the row labels as header elements and use
CSS to position and style them appropriately. The column headers would be
the actual labels for the first row of radio buttons. Subsequent rows of
radio buttons would also have labels 1, 2 and 3 but they would be positioned
off-screen.

The code would therefore look something like:

<h2>Comedy Nights</h2>
1 2 3
. . .
<h2>Dances</h2>
.1 .2 .3
<h2>Films</h2>
.1 .2 .3
<h2>Athletic events</h2>
.1 .2 .3
<h2>Community Service</h2>
.1 .2 .3
<h2>Battle of the Bands</h2>
.1 .2 .3

You might choose to use fieldsets instead of header elements, although that
would not be good if the text is long. Whatever elements you choose, I would
advise this approach, and use CSS to sort it out visually. I wouldn't be a
bit surprised if Thierry Koblenz hasn't got an example of this on his
website www.tjkdesign.com.

Steve