Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Space | Toggles checkbox between checked and unchecked states, and between indeterminate (mixed) and unchecked states. |
Roles and attributes
The list below describes roles and attributes that component already has.
| Component | Role | Attribute | Usage |
|---|---|---|---|
Checkbox.Value | checkbox implicit on <input type="checkbox"> | Identifies the element as a checkbox. The child text content of this element provides the accessible name of the checkbox. | |
Checkbox.Value | tabIndex="0" | Includes the checkbox in the page Tab sequence. | |
Checkbox.Value | aria-invalid="false" | Turns to true if state="invalid" is provided. |
Considerations for developers
Grouping with fieldset
You can group Checkbox controls using the <fieldset> tag. The <legend> tag describes the grouping. Refer to the Checkbox group example.
Some assistive technologies read the <legend> text, so it should be brief and descriptive. This helps users understand the question they are answering with the group of checkbox buttons.
Grouping with group role
If you use group role to group checkbox buttons, add a common label and connect it through aria-labelledby.
Roles and attributes
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.
| Role | Attribute | Usage |
|---|---|---|
group | Identifies the div element as a group container for the checkboxes. | |
aria-labelledby="[IDREF]" | Refers to the element that contains the label of the checkbox group. |
Resources
- W3 checkbox example has detailed information about the accordion accessible behavior.
- A11y style guide gives core recommendations for the accessible checkboxes.
- Find live examples of accessible inputs with different types in DigitalA11y project.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.