Accessible Forms

Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is another. Because of this, it is a good idea to add a number of elements to the form.

Labels

Each form field should have its own label. The label tag sorts this out, with a for attribute that associates it to a form element:

<form>
<label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" />
...

Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field.

Note: name and id are both required - the name for the form to handle that field and the id for the label to associate it to.

Field sets and legends

You can group fields, for example name (first, last, middle, title etc.) or address (line 1, line 2, county, country, postal code, country etc.) using the fieldset tag.

Within the field set, you can set a legend with the legend tag.

Note: Visual browsers tend to represent field sets with a border surrounding them and legends breaking the left of the top border.

<form action="somescript.php" >
<fieldset>
<legend>Name</legend>
 <p>First name <input type="text" name="firstName" /></p>
 <p>Last name <input type="text" name="lastName" /></p>
</fieldset>
<fieldset>
 <legend>Address</legend>
 <p>Address <textarea name="address" ></textarea></p>
 <p>Postal code <input type="text" name="postcode" /></p>
</fieldset>
...

Option groups

The optgroup tag groups options in a select box. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the drop-down list of visual browsers.

<select name="country">
 <optgroup label="Africa">
  <option value="gam">Gambia</option>
  <option value="mad">Madagascar</option>
  <option value="nam">Namibia</option>
 </optgroup>
 <optgroup label="Europe">
  <option value="fra">France</option>
  <option value="rus">Russia</option>
  <option value="uk">UK</option>
 </optgroup>
 <optgroup label="North America">
  <option value="can">Canada</option>
  <option value="mex">Mexico</option>
  <option value="usa">USA</option>
 </optgroup>
</select>

Navigating fields

Like links, form fields (and field sets) need to be navigated to without the use of a pointing device, such as a mouse. The same methods used in links to make this task easier can be used on form elements - tab stops and access keys.

The accesskey and tabindex attribute can be added to the individual form tags such as input and also to legend tags.

input type="text" name="firstName" accesskey="f" tabindex="1" />
<