How to test
Forms

There are several types of HTML form fields and ensuring each type is accessible is crucial to enabling all users to fully engage with a site.

1 Input Fields

Input fields allow users to provide information such as text, numbers and passwords. Keyboard and screen reader users should be able focus on each input field with their tab key, enter the relevant information, and tab away.

Example: Alpha, Bravo, Charlie

2 Checkboxes

Checkboxes allow users to select one or more options from a list. Keyboard and screen reader users should be able to focus on each checkbox field with their tab key and use the enter or space keys to select or unselect the item.

Choose your favorite NATO letters:

3 Radio Buttons

Radio buttons allow users to select a single option from a list. Only one radio button in a group should be be selectable at a time. Keyboard and screen reader users should be able to focus on the group of radio buttons using the tab key. Arrow keys move focus between each radio option. Options can be automatically selected as they receive focus with the arrow keys, or they can be selected using the space key. Pressing tab navigates aways from the radio group.

Choose a fruit

4 Select Fields

Select fields allow users to select one or more options from an expandable list of options. Keyboard and screen reader users should be able to focus on the select using their tab key. The space key expands the list of options, the arrow keys traverse the options, and the space or enter keys make a selection. Escape collapses the list.

5 What to test for

✓ Ensure forms have persistent visible labels

Note: A placeholder does not count as a visually persistant label

Pass Fail

✓ Ensure forms can receive keyboard focus and have focus indicators

Pass Fail

✓ Ensure forms meet color contrast requirements

Note: Form field keyboard focus states and form field borders must meet WCAG's 3:1 color contrast ratio minimum

Pass Fail

✓ Ensure interating with a form doesn't automatically or unexpectedly change context on the page without informing users

Note: Forms should have submit buttons so the change of context is initiated by the user.

Pass Fail

✓ Ensure required and/or optional forms are clearly indicated and announced as such

Note: Use of * or "required" in the field label in addition to aria-required="true" or required attributes help communicate to screen reader users the required nature of the field.

Pass Fail
* denotes required field

✓ Ensure related form fields are announced as grouped together

Note: Valid use of fieldset is a good method for grouping form fields.

Pass Fail
Choose a properly grouped day
Choose an incorrectly grouped day

✓ Ensure any associated instructions or helper text is announced when tabbing to a form

Note: Use of aria-describedby programmatically associates nearby text with form fields.

Pass Fail
Delta is the fourth letter of the NATO alphabet.
Echo is the fifth letter of the NATO alphabet.

✓ Ensure there is proper error handling for required fields

Note: Error messages should be announced for screen reader users when the form field receives focus. Forms should also notify screen reader users if invalid content has been entered in a field.

Pass Fail
  • 1.3.1 Info and Relationships
  • 3.2.2 On Input
  • 3.3.1 Error Identification
  • 3.3.2 Labels or Instructions
  • 3.3.3 Error Suggestion
  • 3.3.4 Error Prevention
  • 4.1.2 Name, Role, Value

Resources