Checkbox
Interactive element that lets users select one or more independent choices.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Don’t use the aria-checked attribute for indeterminate checkboxes. Instead, set its indeterminate property to true or false using JavaScript. Reference the coded examples.
and indicate a set of checkbox elements grouped together. - Always use the
element to indicate a set of checkbox elements are grouped together. It can be visually hidden if necessary using the library’s screen reader class. - Use an HTML list for the checkboxes to ensure screen readers will announce how many checkboxes are in the group.
- Always use the
- Ensure additional instructions or error messaging are associated with the checkbox group so screen readers will read them. Reference Angular or React for examples.
- Always use the
attribute for legal acknowledgments. - Ensure each checkbox input has an
associating it with its label. Be sure to associate additional text and error messages to its relevant checkbox input or fieldset. Reference the code for more. - Ensure all checkboxes used in tables have accessible names for screen readers that communicate which row or column they’re associated with. For example, “Select ProjectA”.
Keyboard controls
| Key | Behavior |
|---|---|
| Tab | Moves keyboard focus to the next checkbox in a group or next interactive element. |
| Space | Selects/unselects the checkbox when the component is in focus. When the parent checkbox shows the unselected state, all nested checkboxes are unselected. When the parent checkbox shows the indeterminate state, selecting the parent checkbox selects all nested options. When the parent checkbox shows the selected state, all nested checkboxes are selected. |