No Boundaries Logo

Web Accessibility Policy of the State of Maine

Back to Policy Table of Contents

Implementation Guidelines

10. Forms

10.1 - Associate labels with all form fields

What:
HTML forms include "fields" such as buttons (<input type="button">), text boxes (<input type="text">), list boxes (<select>), and more. Each field is typically identified by a text label.

Why:
Screen readers cannot always determine which label belongs to which field based on positioning alone. The <label> element makes this association clear.

How:
Use the <label for=""> tag to label every form field.
Note: The value of a label's "for" attribute is the corresponding field's id, not its name.

Ref: WCAG 12.4; 508 n

10.2 - Position labels as close as possible to form fields.

What:
Using certain layout techniques, form labels are not always positioned immediately next to their fields.

Why:
When screen magnification software enlarges a web page it also reduces the field of view. If form field label is positioned far away from its field, it may be impossible for a screen magnifier-user to view both the field and the label at the same time.

How:
Position labels immediately adjacent to fields, preferably in standard locations, such as on the left or above text boxes and list boxes and on the right of checkboxes and radio buttons.

Ref: WCAG 10.2; 508 n

10.3 - Include any special instructions within field labels.

What:
Frequently, special instructions are listed after the field to which they apply. In some cases, instructions are even presented in "pop up" text or in the browser's status bar.

Why:
When filling out a form, screen readers typically read only the field's label. Screen magnifiers will focus on the field and its label, and instructions may be out of the field of view.

How:
Special instructions should be given before the form field and within the field label if possible. If instructions are too long to appropriately fit within the label, they should be given in an instructions section in advance of the form.

Ref: 508 n

10.4 - Make sure that form fields are in a logical tab order.

What:
Screen reader and keyboard users move between form fields (and links) using the Tab key. The order in which form fields receive focus is called the tab order. By default, the tab order follows the order in which elements appear in a page's HTML code.

Why:
Depending on the design and layout of a page, the tab order may not match the visual (or logical) order of fields on a form. Reading fields out of their intended order can be disorienting for a screen reader or keyboard user.

How:
Make sure that fields appear in the HTML code in the logical order and/or use tabindex to set the appropriate order.
Note: Tabindex only is supported by Internet Explorer 4 and up.

Ref: WCAG 9.4; 508 n