---
url: /components/checkbox/accessibility.md
description: >-
  Checkboxes allow users to select one or more items from a set. Checkboxes can
  turn an option on or off.
---

# Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

[Overview](overview.md) · [Specs](specs.md) · [Guidelines](guidelines.md) · **Accessibility**

## Use cases

People should be able to use assistive technology to:

* Navigate to a checkbox   
* Toggle the checkbox on and off
* Get appropriate feedback based on input type documented under [Interaction & style](#6a2f55e5-2fa0-4204-b6d1-62362dda89c7)

<a id="6a2f55e5-2fa0-4204-b6d1-62362dda89c7"></a>

## Interaction & style

Users should be able to select either the text label or the checkbox to select an option.

![In a list, checkboxes for 2 items are selected via their text labels.](/assets/7ac3ac94-mg0vkh7s-1.CbybJ5Le.webp)

A checkbox selected via the text label

The parent checkbox has three states: selected, unselected, and indeterminate. 

Checkboxes can be selected or unselected regardless of the state of the other checkboxes in a group. 

If some, but not all, child checkboxes are checked, the parent checkbox becomes indeterminate. Selecting an indeterminate parent checkbox will check all of its child checkboxes.

![In a list, a child checkbox for 1 item is selected and the parent checkbox is in indeterminate state.](/assets/001c6559-mcyq4z51-2.DzwzuCxj.webp)

An indeterminate selection indicating that at least one checkbox is selected within a group

## Avoid applying density by default

Don't apply density to checkboxes by default — this lowers their targets below our best practice of 48x48 CSS pixels. Instead, give people a way to choose a higher density, like selecting a denser layout or changing the theme.

To ensure that this density setting can be easily reverted when it's active, keep all the targets to change it at minimum 48x48 CSS pixels each.

## Keyboard navigation

| Keys                        | Actions                                                                                                                                                                                                                                                        |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Tab**                     | Moves focus to [enabled](../../foundations/interaction/states/applying-states.md#39b2fc90-01db-41b5-b6f8-47be61ed1479 "An enabled state communicates an interactive component or element.") chip or chip group                                                 |
| **Space** or **Enter**      | Activates, selects, or deselects the focused chip                                                                                                                                                                                                              |
| **Backspace** or **Delete** | Removes currently [focused](../../foundations/interaction/states/applying-states.md#bc6d6853-48ef-490e-8076-448e89e69f0f "A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.") input chip |
| **Arrows**                  | Moves focus between chips                                                                                                                                                                                                                                      |

## Labeling elements

If the UI text is correctly linked to the checkbox, assistive tech (such as a screen reader) will read the UI text followed by the component’s role.

The [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities.") label for an individual checkbox is typically the same as its adjacent text label.

![Accessibility labels of a checkbox.](/assets/07b0930a-mg0vlqi0-3.DXv7hGiO.webp)

The accessibility label clearly states the text label of the checkbox