Accessible Forms

The accessibility for forms is important issue to consider for making site attractive for the users with disabilities, especially for those who are blind or visually impaired. There can be no problem with navigating around a page with written content, but to determine the purpose of a specific form as well as interact with it can be a challenge. Thus, it is better to add a number of elements to the form to improve the process of imputing information.

Labels

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

<form>
<label for=”yourName”>Your Name</label> <input type=”text” name=”yourName” id=”yourName” />
…

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

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

You can set a legend with the legend tag within the field set.

Note: Visual browsers 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

To group options in a select box you should use the optgroup tag. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the 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

To allow the users navigate from fields without the use of a pointing device you can use tab stops and access keys.
The accesskey and tabindex attribute can be added to the individual form tags such as input and to legend tags.

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