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

Pass Fail

✓ Ensure forms can receive tab focus and have focus indicators

Pass Fail

✓ Ensure forms meet color contrast requirements

Pass Fail

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

Pass Fail

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

Pass Fail
* = required field

✓ Ensure related form fields are announced as grouped together

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

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

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