Checkbox

Accessibility and usability expectations

Checkboxes are most commonly used as part of a checkbox group, but a checkbox can be used on its own. The following guidance is for a checkbox used on its own. If using a group of checkboxes, refer to the checkbox group accessibility guidance.

A checkbox must have a clear, descriptive, and permanently visible label so that users understand the purpose of the checkbox.

The label should appears to the right of the checkbox and if there is a caption it should appear below the label.

The text must meet the minimum contrast requirements of 4.5:1.

The border of a checkbox must have a minimum contrast ratio of 3:1 against the background.

A checkbox must have a visible focus style. A custom focus style should be used as the browser's default focus style is often hard to see against some backgrounds. A custom focus style must have a minimum contrast ratio of 3:1 against the background.

The target size and spacing of a checkbox must be at least 24 by 24 css pixels.

The text must be resizeble and the text spacing adjustable, and must remain by readable, without requiring horizontal scrolling, when zoomed or viewed at a width equivalent to 320 CSS pixels.

Unless a checkbox is disabled, it must by focusable using the Tab key, and pressing the Space will check and uncheck the checkbox.

A checkbox must not trap focus or initiate a change of context when focused or activated.

The input must have an associated <label> to give it an accessible name that is announced by screen readers. Additional instructions or requirements must be easily discoverable by screen reader users - in general, by having them programmatically associated with the input using aria-describedby.

The accessible name must include any visible text label so that that spreech recognition users can activate a checkbox by saying the visible text label.

A checkbox must have the role of checkbox so that screen readers convey the correct type of control.

The checked state of a checkbox must be conveyed by screen readers so blind users knows if it is checked or not.

If a checkbox is disabled, the disabled state must be conveyed by screen readers.

Built-in accessibility features

The label, caption, checkbox border, and custom focus style meet minimum contrast requirements.

The text is resizeable and the text spacing adjustable. The component reflows when zoomed or viewed at a width equivalent to 320 CSS pixels.

By default, the component renders a correctly associated pair of <label> and <input type="checkbox">, ensuring the checkbox has an accessible name that includes any visible text.

Using the the native <input type="checkbox"> ensures that the checkbox conveys the correct role and checked state to screen readers and has the correct keyboard behaviour.

The caption is automatically associated with the <input> using aria-describedby.

When the checkbox is disabled, the disabled attribute is applied and the disabled state conveyed to screen readers.

When the checkbox is given the indeterminate state, aria-checked="mixed" is applied and the state conveyed to screen readers.

Implementation requirements

Do not visually hide a checkbox's label.

When using an icon for a leading visual, note that the icon doesn't have a text alternative. They are purely visual and not conveyed to screen readers. Don't rely on these icons alone to convey meaning – make sure that the text label of the button provides sufficient meaning/context on its own.

Ensure that the checkbox has sufficient spacing from other controls, to meet the minimum target and spacing size of 24 by 24 CSS pixels

How to test the component

Integration tests

• The checkbox has a clear and permanently visible label that describes the purpose of the checkbox
• If the checkbox includes a leading visual icon, the input's purpose is clear from the text alone
• The checkbox has sufficient distance from other controls to meet the minimum target and spacing size of 24 by 24 CSS pixels

Component tests

• The component renders a correctly associated pair of <label> and <input type="checkbox">
• The label appears to the right of the checkbox, and if there is a caption it appears below the label
• The label and caption meet the minimum contrast requirements of 4.5:1
• The checkbox border and custom focus style meets the minimum contrast requirement of 3:1
• The content remains readable, without requiring horizontal scrolling, when zoomed or viewed at a width equivalent to 320 CSS pixels
• If there is a caption, it is automatically associated with the <input> using aria-describedby
• If the checkbox is disabled, the disabled attribute is present
• If the checkbox is indeterminate, aria-checked="mixed" is present and conveyed to screen readers