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:



For example:
<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.

For example:
<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.

For example:
<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>