How to test
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.
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.
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.
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
placeholder does not count as a visually persistant label
✓ Ensure forms can receive keyboard focus and have focus indicators
✓ 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
✓ 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.
This was an expected submission!
This was an unexpected submission!
✓ 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
required attributes help communicate to screen reader users the required nature of the field.
* 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.
✓ 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.
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.
I announce with the input
I do not announce with the input
- 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