Accessibility acceptance criteria for forms

• Overview
• Scenario format
  • Scenario: User is completing a form
  • Scenario: User made one or more errors while filling out a form
• List format

---

Overview

Accessibility acceptance criteria (A11yAC) are the set of requirements specifically related to accessibility that must be completed for a feature to be considered "done". Writing A11yACs helps you create a better, more usable product that includes people with disabilities. A11yACs should be included at both the design and development phases.

Forms can create barriers for many people with disabilities. Include these A11yACs in your list of acceptance criteria so your forms are accessible to the widest audience possible. The same A11yACs are given in both scenario and list formats.

Scenario format

Scenario: User is completing a form

Given I use a screen reader,
When I reach a form field,
Then my screen reader announces the type of field,
And the state of the field,
And the label for the field,
And any description for the field,
And if the field is required.

Given I have low vision,
When I reach a form field,
Then the label is located directly above the field,
And the label indicates if the field is required,
And the label and any description meet a color contrast ratio of at least 4.5:1.

Given that I have a cognitive impairment,
When I reach a form field,
Then the label and any description clearly indicate how to fill out the field,
And whether the field is required
And the label stays visible as I type.

Given I use a keyboard to navigate the form,
When I reach a form field,
Then the field will have a vivid visual indicator to let me know which field I am on,
And expected keystrokes can be used to interact with the field.

Scenario: User made one or more errors while filling out a form

Given I use a keyboard to navigate the form,
When I make a single error in a form,
Then keyboard focus moves to the field in error.

Given I use a keyboard to navigate the form,
When I make several errors in a form,
Then keyboard focus moves to a list of errors at the top of the form.

Given I use a screen reader,
When I make several errors in a form,
Then my screen reader announces the number of errors.

Given I have low vision,
When I am on a field in error,
Then a visible error message appears immediately below the field.

Given I use a screen reader,
When I reach a field with an error,
Then my screen reader announces the error message.

Given I have a cognitive impairment,
When I reach a field with an error,
Then the error message clearly and concisely describes the error and provides me with suggestions for correcting the error.

Given I have low vision,
When red text is used for an error message,
Then the red text must meet a color contrast ratio of at least 4.5:1.

List format

• Form fields use an appropriate form element or input type.
• Form fields include all appropriate states and properties.
• Form fields have a visible label directly above the field.
• Labels are connected to the field, such as with <label for=[id]> or through aria-labelledby.
• Labels persist and stay visible when the field is focused and active.
• Form field descriptions are connected to the field, such as with aria-describedby.
• Form field descriptions, including formatting instructions, are not provided through placeholder text.
• Required fields are indicated visually and through the code (such as with a required attribute).
• Labels and or descriptions clearly indicate how to fill out each field.
• Form fields have a vivid visual focus indicator.
• Form fields use expected keyboard interactions.
• Multiple errors are indicated in a list at the top of the form, including the number of errors.
• Keyboard focus moves to a single field in error or to the list of errors if there are multiple errors.
• Each form field in error has a visible in-line error message located immediately below the field.
• In-line error messages are connected to the form field with aria-describedby.
• Error messages clearly and concisely describe the error and suggest how to correct the error.
• All form fields, labels, and error messages must meet a color contrast ratio of at least 4.5:1 against the background.