Accessible Forms

Forms collect information, and with proper formatting, any user can complete a form efficiently. Understanding the expected behavior for basic form inputs can inform general form interaction patterns and facilitate the use of more advanced form inputs.

All 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.

Radio Buttons 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.

Text Input 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

Do
  • Associate each form input semantically with its visually-associated label
  • Semantically convey restrictions on elements like text inputs
  • Use multiple methods in addition to color to convey errors, warnings, and states
Don’t
  • Remove key areas of the form like the submit button
  • Add controls prior to the input in focus
  • Visually separate inputs and their labels

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section