Read This First
The code in this example is not intended for production environments.
Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
- There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
- The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
- Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.
About This Example
This example demonstrates using the Checkbox Design Pattern to create a tri-state, or mixed-state, checkbox. In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes. If none of the checkboxes in the set are checked, the mixed state checkbox is not checked, and if all members of the set are checked, the mixed state checkbox is checked. If the set contains both some checked and unchecked checkboxes, the mixed state checkbox is partially checked. Activating the tri-state checkbox changes the states of the checkboxes in the set.
Similar examples include:
- Checkbox (Two State): Simple two state checkbox.
- To help assistive technology users understand that the checkboxes are all part of a group of related checkboxes named
Sandwich Condiments, the checkboxes are wrapped in a
fieldsetelement which is labeled by a
- 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
currentcolorvalue for the
strokeproperty of the
polylineelements used to draw the checkbox. To make the background of the checkbox graphics match the high contrast background color, the
fill-opacityattribute of the
rectelement is set to zero. If specific colors were instead used to specify the
fillproperties, 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-adjustproperty set to
currentcolorvalue to be updated in high contrast mode. Some browsers do not use
autofor the default value.
|Tab||Moves keyboard focus among the checkboxes.|
Role, Property, State, and Tabindex Attributes
||Includes the checkbox in the page tab sequence.|
||identifies the set of checkboxes controlled by the mixed checkbox.|