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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Keith Parks
Sent: 21 March 2008 18:15
To: WebAIM Discussion List
Subject: [WebAIM] Form labeling question

Hi folks.

I'm trying to put together a form with some rank-order questions, and I'm
having trouble figuring out the labels.

A sample question, with the layout the client is asking for:

************

What types of events would you like to see more of? (indicate your top
three)

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

***************

The bullets above represent radio buttons. If this was a data table, it
would be easy to solve with row and column scope, but I can't figure out an
equivalent for labels. Plus, not only does each radio button need *two*
labels, but each activity would need to be the label for three buttons.

Any suggestions?

Thanks,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: <EMAIL REMOVED>
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)