The checkbox is a widget used to select/unselect single values from a given set of choices.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
A descriptive and programmatic label MUST be provided for the checkbox. See
“Label placement and structure” component for more information on labelling.
The placement of the label MUST be to the right of the checkbox.
To know more information on how to handle the below accessibility requirements, check
“Input Structure” component.
Providing any additional instructions pertaining to the checkbox.
Checkboxes that are required fields.
Keyboard support MUST be present for the checkbox.
The checkbox MUST be focusable using keyboard and have a distinct visual focus that passes
the color contrast requirement of 3:1 ratio against the adjacent colors.
The visual border of the checkbox MUST meet the requirement of 3:1 contrast ratio with the
adjacent color.
The check icon indicating the selected state of checkbox SHOULD meet the contrast
requirement of 3:1 against the adjacent color.
The border of the checkbox and the check icon indicating the selected state of checkbox
SHOULD be visible in High Contrast Mode.
HTML is the preferred method for implementing a single checkbox.
A single checkbox MUST be defined using native HTML
<input type="checkbox">. This helps to provide out of the box
accessibility for the component.
A descriptive and programmatic label MUST be provided for the checkbox. Also, if
required provide any additional instructions pertaining to the checkbox. See
“Label placement and structure” component for more
information on labelling and instructions.
For example,
<input id="acc" type="checkbox" name="acpt" value="accept">
<label for="acc">I agree to the terms and conditions</label>
Though ARIA CAN be used as an alternative, it is advisable to use correct semantic HTML element
since native elements have built-in keyboard accessibility, roles and states.
A single checkbox MUST be defined using role="checkbox" and
tabindex="0" on the neutral containers such as <div> element.
A checkbox MUST have a visible text that can act as a label for the checkbox. See
“Label placement and structure” component for more
information on labelling.
Keyboard event handlers such as OnKeypress, OnKeydown and so on MUST be provided on
the element with role="checkbox" and tabindex="0" to
make the checkbox actionable with a keyboard.
For example,
<div aria-labelledby="acc" role="checkbox" tabindex="0">
<span id="acc"> I agree to the terms and conditions</span>
</div>
A well-defined single checkbox field benefits majorly the below users.
People with cognitive disabilities
People using speech input
People with limited dexterity
People using screen readers
People using keyboard only
<input type="checkbox" name="TC" id="acceptTC" value="acceptTC">
<label for="acceptTC">I agree to the terms and conditions</label>
