Checkbox
This page contains the inaccessible version of the component including the description of issues, additional considerations, and also the more accessible version of the component for comparison.
(future video slot)
Inaccessible Version
Issues
Expand each issue to see the user impact.
Two checkboxes are used instead of one.
A custom checkbox can be created either by using a visually hidden native checkbox or using ARIA and JavaScript. But only one of these approaches should be used.
When using the native checkbox, no JavaScript or ARIA (such as aria-checked) is needed because the checkbox is just hidden behind the box but still focusable and interactive, therefore its functionality is still available. When the state needs to be controlled for example in a React application, then utilize the checked attribute.
When using ARIA with JavaScript, the element must have:
role="checkbox"for assistive technologies to treat it like a checkboxtabindex="0"to be focusablearia-checkedto represent the stateclickandkeydown(Space character) events to be interactive
Input is missing the id attribute.
The for attribute of a <label> element expects an ID of an input field to provide an accessible name and also make the label itself clickable. The input, however, uses only the name attribute, which does not create the relationship. The ID must be present on the input, otherwise, users of assistive technologies, such as screen readers, would not know the checkbox label.
onClick function is redundant.
When a <label> is connected to the input field with ID, then it becomes clickable automatically and controls the state of the checkbox.
When the checkbox is made with ARIA, the accessible name is computed from the contents of the <div role="checkbox">
.
The focus indicator is not sufficient.
Changing the one-pixel wide input border to a grey color on focus is almost invisible indicator in this case.
The SVG tick icon is not visible in the dark version of a high-contrast mode.
All sighted users must see the tick icon to identify whether the checkbox is checked or not.
Considerations
The usage of certain techniques depends on the circumstances. Expand each consideration to learn more.
Consider implementing a hover effect.
It is easier for sighted mouse users to perceive that checkboxes with labels are interactive when the user interface reacts to the hover effect. Changing the background color or border is usually a good indicator.
Consider the usage of relative units instead of pixels.
While not needed for conformance, if users change their text size, the checkbox size does not change. It might be also hard for users to select or find a small checkbox when the text size is very large. By using relative units instead of pixels, the size of the checkbox will adapt to the text size.