Components
Checkbox
Checkbox allows users to select one or more options. It can also be used in situations where the user needs to confirm something.
What you need to check
Groups of choices must have a descriptive legend.
The legend, description, and error messages must be connected to the group so that they are available to assistive technologies.
You can use Fieldset to connect the legend, description, and error messages.
The field must have a clear accessible name that matches the visible label.
The accessible name must contain the visible text that describes the field. This allows users of speech recognition and screen readers to refer to the field using the same name shown on screen.
A checkbox without a visible label must have an accessible name.
This applies, for example, when a checkbox is used in a table and the name must be derived from the content of the row or column.
The accessible name must make it clear what the checkbox refers to.
Required fields must be clearly marked.
Users must easily understand which fields must be filled in. Follow the pattern for required and optional form fields.
Error messages must be clearly linked to the correct field and explain how to fix the error.
The error message must make it clear which field contains an error, what is wrong, and how the user can fix it. Avoid generic messages such as “Error” or “Invalid value”. Use specific messages instead, for example “The email address must contain @”. See the pattern for user-triggered error messages for recommendations on when and how error messages should be shown.
WCAG: 3.3.1 Error Identification (W3C) and 3.3.3 Error Suggestion (W3C)
Test with a Keyboard
Verify that you can
- reach a checkbox using Tab
- check and uncheck it using Space
- reach all checkboxes in a group using Tab
- navigate back to a previous checkbox using Shift + Tab