Making forms accessible article By Adrian Rayfield
Last edited: 26.11.2006
Practical ways to ensure your forms are accessible and useable
Forms play an important part in any web site. They can be used to allow your visitors to contact you, to order items or so you can collate information. If these forms are not usable or accessible your user will not be able to have this interaction with you.
This article will explain some key points in making forms accessible. There will be sample code included so you can put this into action today!
The following is based on the current WCAG 1.0 and specifically the following guidelines:
Priority 2
10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. [Priority 2]
The label must immediately precede its control on the same line (allowing more than one control/label per line) or be in the line preceding the control (with only one label and one control per line).
12.4 Associate labels explicitly with their controls. [Priority 2] For example, in HTML use LABEL and it's "for" attribute.
Priority 3
10.4 Until user agents handle empty controls correctly, include default, place holding characters in edit boxes and text areas. [Priority 3] For example, in HTML, do this for TEXTAREA and INPUT.
OK, now let's take a closer look at these guidelines and what they mean. I'm assuming you know how to code and know how to produce a basic form as this article doesn't cover this. I will however give an example of an accessible form that's AAA compliant, and also CSS and XHTML valid.
Priority 2
The <label> tag is used to join together the label (the text before the form control) and the form element, such as a text input box. This is done by using the for="" attribute and then giving the form element a unique ID.
An example may look like this:
<label for="firstname">First name: <input type="text" id="firstname"></label>
The label must come before the form control, such as a text input box.
A label must be clearly joined to its form control. This is done by the for="" and then the form control has a unique ID tag, as in the example above where the firstname on the label tag matches the ID on the form control id = "firstname".
Priority 3
Text boxes and textareas that allow user input should have some text pre-filled in them as this aids some assistive devices in finding and using forms.
The initial value text is added by using the value="" tag. An example may look like this:
value="Type your first name here"
A completed label, form control and initial value could look something like this:
<label for="firstname">
<input type="text" name="firstname" value="Type your first name here" id="firstname"/>
</label>
Going further
There are other things you can do to increase accessibility and usability that are not in the guidelines.
We can add some CSS styling so that when an element is in focus there is a cue given to the user, such as a colour change. An example may look like:
input:focus {background-color: #ccaa99; color: #ffffff; }
input:hover {background-color: #ccaa99; color: #ffffff; }
We can also add a cool bit of JavaScript that clears the initial text in text boxes when they are in focus. This saves the user sending a form with the initial text by mistake and also saves the user having to delete the text before entering their information. The code is as follows :
onfocus="if(this.value == 'Type your first name here') this.value = ";"
Add this to your <input> tags and change the text (Type your first name here) to match exactly what your initial text says. Do this for each input.
You can also use the title tag for giving further explanations as to the information required. For example:
title="Enter your first name here"
You can group items together such as ‘about you’, ‘your order’ etc. This can be done by using the fieldset and legend tags:
<fieldset><legend>About You</legend>
About you content goes here........
</fieldset>
Again this can be styled via CSS to match your sites look etc.
Above all, ensure the forms are easy to use and follow:
- Don't push everything together - allow some space between items.
- If you have required information, make sure you tell the user at the start of the form, not at the end as they may have to go back and start again.
- Also make sure each required element is clearly labeled and that doesn't mean by using a colour, use a character such as a *.
- It's also a good idea that, if you have a reset button, you move it away from the submit button so it's not pressed by mistake.
Article written and copyright held by Adrian Rayfield of Rayfields Accessibility © 2006.
Did you find this article / tutorial useful, please give us your comments.
For more information on Rayfields Accessibility Consultancy and building accessible forms please contact us by telephone on 0845 0037 508 or email : accessibility@rayfields.co.uk.
