Accessible Forms

Form Inputs

Assistive technology users expect that all inputs follow certain principles that allow them to most efficiently complete forms. In particular, follow these guidelines:

• Semantically tie all form inputs to visually-associated labels.
• Do not add text above the form input being manipulated.
• Do not visually separate inputs and their labels.

Checkboxes & Radio Buttons

Though similar in nature, checkboxes and radio buttons differ in that checkboxes enable users to select multiple options at the same time, while radio buttons only allow for one selected option at any given time. Users of assistive technologies can more efficiently navigate and complete your form if:

• Each radio button group has one tabstop.
• They can use arrow keys to navigate within a group.
• Questions use the appropriate type of form control (checkboxes or radio buttons).
• Questions semantically group their related checkbox or radio group using a fieldset and a legend.

Canvas radio buttons using fieldset and legend as suggested

Text Inputs

Many form elements require a specific closed set of information, but text inputs can allow for a larger range of information. When developing text inputs, keep in mind that:

• A tab keypress should navigate to the next element.
• The page should list any notable restrictions to values that can be entered in the text input. These restrictions should be semantically associated with their respective inputs.

Canvas Text Input

Submit Buttons and Error Validation

The submit button is the most important area of a form; a user cannot complete a form if they cannot submit it. For ideal form submission experiences, ensure that:

• After a user submits a form and receives an error notification, focus moves to the first form field that has an error.
• The submit button is always navigable, and causes validation of form fields when a user activates it.
• Any error text is semantically-associated with its visually-associated field.

Do's and Don'ts