WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: help with a form please

for

From: Jukka K. Korpela
Date: Mar 16, 2007 3:10AM

On Fri, 16 Mar 2007, Chris Price wrote:

> If I have a table full of tick boxes with <th> cells at the top and left
> indicating scope but with no labels (as there is no text to wrap the
> label around) how will someone using a screen reader deal with this?

This has been discussed on the list at least once, with no consensus. My
advice is that such constructs should not be created. Instead of creating
a matrix of "tick boxes" (radio buttons and checkboxes), either attach a
label to each of them so that you have

Bla bla bla? ( ) agree, ( ) dunno, ( ) don't agree

or (better still) use a text input box:

Bla bla bla? [ ]

where [ ] indicates a 1-character text input box where the user can type
e.g. "Y", "N", or "-". Then the question should be marked up as label for
the field. This approach has several _other_ accessibility benefits too.
It also makes it _more evident_ to the person designing form processing
that all data shall be checked server-side. The drawback is that the user
may mistype and the error would be reported on form submission only,
unless you add JavaScript code to do preliminary checks on the fly.

> And what about labels and <select> and <textarea>?

That shouldn't be a problem. Those elements should have labels, and it is
usuall obvious which text should be wrapped inside <label> markup, e.g.

<label for="comm">Your comments:</label><br>
<textarea id="comm" rows="20" cols="50">

For <select>, don't worry about labelling <option>s. They cannot be
labelled, and need not be labelled. In non-visual browsing, the browser
will present the options to the user and let the user select among them.
Just make sure that the <option> contents are informative and
human-oriented, not machine-oriented codes. In a sense, the _content_ of
the <option> element works as a label for the associated internal,
machine-processable _value_ associated with it, e.g.

<option value="USD">US dollar</option>

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