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.
We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.
It must be possible to move focus to the Checkbox by pressing Tab on the keyboard. It must also be possible to check and uncheck it by pressing Space.
Keyboard navigation
- Space toggles the state
Use a label
A Checkbox must always have an accessible name. In most cases, this will be a <label>. In special cases, it may make sense to omit the <label> and instead use aria-label or aria-labelledby. An example of both of these aria attributes is shown in the use of Checkbox in the table further up the page.