This example implements the
Checkbox Pattern
for a two state checkbox using
div
elements.
Similar examples include:
Checkbox (Mixed-State)
: Demonstrates a checkbox that uses the mixed value for aria-checked to reflect and control checked states within a group of two-state HTML checkboxes contained in an HTML
fieldset
.
Accessibility Features
To help assistive technology users understand that each checkbox is part of a set of related checkboxes named
Sandwich Condiments
, the checkboxes are wrapped in a
group
labeled by the
h3
heading element.
To enable assistive technology users to perceive the set of checkboxes as a list of four items, each
div
element that serves as a checkbox is contained within a
li
element contained by a
ul
element.
To make it easier to perceive that clicking either the label or checkbox will activate the checkbox, when a pointer hovers over either the checkbox or label, the background color changes, a border appears, and the cursor changes to a pointer.
Because transparent borders are visible on some systems when operating system high contrast settings are enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
Instead of using transparency, the focused element has a thicker border and less padding.
When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
To ensure the borders of the inline SVG checkbox graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
For example, the color of the checkbox borders is set to match the foreground color of high contrast mode text by specifying the CSS
currentcolor
value for the
stroke
property of the
rect
and
polyline
elements used to draw the checkbox.
To make the background of the checkbox graphics match the high contrast background color, the
fill-opacity
attribute of the
rect
element is set to zero.
If specific colors were instead used to specify the
stroke
and
fill
properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the checkbox and the background or even make the checkbox invisible if the color matched the high contrast mode background.
Note: The SVG element needs to have the CSS
forced-color-adjust
property set to
auto
for the
currentcolor
value to be updated in high contrast mode.
Some browsers do not use
auto
for the default value.
aria-labelledby
References the
id
attribute of the
h3
element to define the accessible name for the group of checkboxes.
checkbox
Identifies the
div
element as a
checkbox
.
The child text content of this
div
provides the accessible name of the checkbox.
Indicates the
checkbox
is
not
checked.
CSS attribute selectors (e.g.
[aria-checked="false"]
) are used to synchronize the visual states with the value of the
aria-checked
attribute.
To support operating system and browser high contrast settings, the CSS
::before
pseudo element and
content
property are used to generate the visual indicators of the checkbox state.
Indicates the
checkbox
is checked.
CSS attribute selectors (e.g.
[aria-checked="true"]
) are used to synchronize the visual states with the value of the
aria-checked
attribute.
To support operating system and browser high contrast settings, the CSS
::before
pseudo element and
content
property are used to generate the visual indicators of the checkbox state.
