digital media access group

...excellent accessibility research and consultancy

home > resources > accessible design articles > making your forms more accessible and usable

Making Your Forms More Accessible and Usable

By Katrina Hands, published 26th July 2004.

Forms often cause both accessibility and usability problems for disabled web users. This is largely because those HTML elements and attributes that can promote form accessibility are simply not known to the web designer.

There are a few key steps that you can take to greatly improve accessibility.

1. Layout of form elements

Form elements should be set out in a particular way in order to enable screen readers to interpret them correctly.

For most form inputs, the text (or label) that relates to the form control should precede the control (either directly above or to the left). This is the case for the elements: text, password, textarea and select.

However, for the elements: radio and checkbox, the form control comes first. For example:

What fruit do you like:

This is the single most important step to follow as this will enable assistive devices to correctly interpret you form.

2. The label element

The element is one of the most useful elements you can use to make a form more accessible. Confusion can arise for screen reader users when they are told of a text entry box or other input element, but have no idea what data should be entered. Using the <label> element creates an unambiguous link between the text and the input.

For every form input (except buttons), ensure that the associated text has a label tag wrapped around it. For example:

<label for="firstname">First
Name</label><br/>

<input type="text" name="firstname"
id="firstname" size="20"/>

Another benefit of using the <label> element is that it also gives the sighted user a larger area to click on with their mouse. This is particularly useful when used with checkboxes and radio buttons as it enables the user to click on either the checkbox or radio button, as usual, or to click on the associated text to make their selection. It is advisable to use a style to suggest to the user that the text is clickable, otherwise they will not benefit from the advantage.

3. The title attribute

Another way of enhancing accessibility is to add a title attribute to each <input> element in your form. Use the title attribute to provide text that describes what should be entered, for example: title=”Enter First Name” or title=”First part of your postcode”

This text will then be picked up and read out by a screen reader, at least, more recent versions of screen readers, and will be particularly useful in complex forms where it might not be so easy to associate a label with a specific control.

4. Layout out your form

Tables are often used to present form inputs as they enable all parts of the form to be lined up. When using tables for this purpose you should check your table in a linearized view, for example by viewing it in the Lynx text browser. Try to avoid putting the text for each form control in separate cells from the controls themselves, like so:

Input text:	Input text:	Input text:

<table>
<tr><td>Input text:</td><td>Input text:</td><td>Input text:</td></tr>
<tr><td><input type="text" name="text" size="10" /> </td>
	<td><input type="text" name="text" size="10" /></td>
		<td><input type="text" name="text" size="10" /></td></tr>
</table>

Screen readers will have real difficulties interpretting this correctly, as will text browsers such as Lynx. Instead, wherever possible, you should keep them together using either of the two options shown:

Input text:

<table>
<tr><td>Input text: <br /><input type="text" name="text" size="10" /></td>
<td>Input text: <br /><input type="text" name="text" size="10" /></td>
<td>Input text: <br /><input type="text" name="text" size="10" /></td></tr>
</table>

Input text:

<table>
<tr><td>Input text: <input type="text" name="text" size="10" /></td>
<td>Input text: <input type="text" name="text" size="10" /></td>
<td>Input text: <input type="text" name="text" size="10" /></td></tr>
</table>

However, if you use the <label> element correctly, there should be no problems with screen reader interpretation.

5. Adding structure to your form

Adding structure to your form will enhance usability. Using the <fieldset> and <optgroup> elements to group the elements on your form will make it considerably more usable.

The fieldset element

The <fieldset> element lets you group a number of form controls together visually. Unfortunately, screen reader support for <fieldset> is very limited, however, this should not deter you from using it.

<fieldset>

<legend>Favourite Food</legend>

<select>

<option>Apples</option>

<option>Bananas</option>

<option>Oranges</option>

<option>Grapes</option>

</select>

</fieldset>

Favourite Food

Note that the <fieldset> element can be used to group together any form input elements, and can also be nested, as shown:

Favourite Food
Favourite Fruit Favourite Vegatable Favourite Meat

The optgroup element

As its name suggests, the <optgroup> element is used to group options and is used within a <select> tag. For example:

<select name="favoritecities">

<optgroup label="Great Britain">

<option>Bristol</option>

<option>Edinburgh</option>

<option>Glasgow</option>

<option>London</option>

<option>Manchester</option>

</optgroup>

<optgroup label="France">

<option>Bordeaux</option>

<option>Lille</option>

<option>Paris</option>

<option>Toulouse</option>

</optgroup>

<optgroup label="Germany">

<option>Berlin</option>

<option>Bremen</option>

<option>Hannover</option>

</optgroup>

</select>

Summary

A form can be presented in countless different ways but there are some quick and simple things you can do to make it accessible. Ensure that the form labels and inputs occur in the correct order, always use the <label> tag and use tables carefully.