Here is handy accessibility tip that will make filling in web forms easier for screen reader users, and for people with impaired motor skills: associate form fields explicitly with their labels by making use of the ‘label’ element and the ‘id’ attribute.
When encountering a form on a web page it is easy for sighted users to work out the expected response for each form element; it is just a matter of reading the label next to the field.
However, it is not always quite so simple for someone using a screen reader. It may not be clear which labels are associated with which field (particularly if the page author has used tables to layout the form, and the screen reader doesn’t understand tables).
If labels are not physically, close or clearly associated with the form element, filling in a form can be extremely difficult for screen reader users.
There is a way to explicitly relate labels with their form elements; each label can be identified with a name, and then associated with the appropriate control using the ‘id’ attribute, e.g.,
<label for="name" >Name</label >
<input name=" Name" type="text" id ="name" >
The value of the for attribute can be any text you choose – as long the appropriate id attribute has the same text. Using this technique also provides a bonus for people with impaired motor skills because it increases the ‘target area’ when assigning focus to the field, i.e. clicking the label or the field itself will focus the cursor in the text field (or check the box if it is a radio button).
I am a fan of using CSS for layout and presentation of web pages – but I do still have a few ‘blind spots’ when it comes to putting my good intentions into practice. For example, with particularly complex forms I still tend to use tables when creating the form layout.
I was alerted to this tip by Tavis Reddick, the Webmaster at Fife College. While communicating about another forms related issue, he pointed me to a useful article about using CSS to layout forms (scroll down the page to find the part about forms layout).
I won’t reproduce the example code here – because it is not the simplest technique I have come across – and I couldn’t figure out a way to simplify it for ‘tip size’ consumption. However, I thought it was worth highlighting this example, as it demonstrates that CSS is flexible enough to be used for tasks beyond the simple two or three column page layout.