Form Tips

Generally, forms are quite inaccessible for users with disabilities. Use the following tips to improve the accessibility of your forms.

Labels

Improve the accessibility of forms by using the <LABEL> element to specify labels for each field in a form.

In the first example, the <LABEL> tag is used before each field, and references the field's name:

<FORM action="script-reference here" method="post">
<LABEL for="name">Name:</LABEL>
<INPUT type="text" name="name">
<LABEL for="address">Address:</LABEL>
<INPUT type="text" name="address">
<LABEL for="message">Message:</LABEL>
<TEXTAREA name="message" cols="40" rows="5"></TEXTAREA>
<INPUT type="submit" value="Submit Form">
<INPUT type="reset" value="Clear Form">
</FORM>

In the second example, the <LABEL> tag surrounds each of the form fields:

<FORM action="script-reference here" method="post">
<LABEL>Name:<INPUT type="text" name="name"></LABEL>
<LABEL>Address:<INPUT type="text" name="address"></LABEL>
<LABEL>Message: <TEXTAREA name="message" cols="40" rows="5"></TEXTAREA></LABEL><br>
<INPUT type="submit" value="Submit Form">
<INPUT type="reset" value="Clear form">
</FORM>

Tab Order

Improve the accessibility of forms by using the TABINDEX attribute in form fields. This will control the order of the fields that a user is presented with as they move through a form by pressing the TAB key.