lecture 9: accessibility

It's important to realise, though, that even when things are close together on the screen, this doesn't automatically create a link between them as far as the computer is concerned. But via a tag - <label> - you can make such an association. The code for the box above looks like this:

<p><label for="box3">Click this box if you wish to receive promotional e-mails</label><input type="checkbox" checked="checked" name="box3" value="yes" id="box3" /<</p>

Although the need to use both name and id here is an irritant, the addition of this tag is fairly straightforward and should be considered compulsory. It has advantages for visual users as well - it means that clicking on the label will check or uncheck the box, as well as just checking on the box itself. Form boxes can be pretty small, and those with restricted hand movements or poor eyesight may find it difficult to make the subtle mouse movements sometimes required. This turns the small box into a much larger one, at least in some browsers, and thereby makes the form more accessible to everyone. Try it yourself on the label above.

There are two other tags which come into play with "sets" of form elements such as check boxes, these are <fieldset> and <legend>. See the online teaching materials for more details.

The other consideration to bear in mind is that of "tab order". You may already know that pressing the Tab key will cycle you through the links on a page - it will also cycle you through the form elements. It's worth checking the order in which Tab focuses on form elements to make sure it's logical. The order will be that which they appear in the code, which seems simple enough, but sometimes, if you use tables to lay out a form, things can get a little confused (and remember that text-only and non-visual browsers will also linearise tables). Keep form layouts as simple and linear as you can - don't send people jumping all over the screen.