Checkbox Example (Mixed State)

This example implements the Checkbox Design Pattern using div element for a mixed state checkbox used in conjunction with a set of standard HTML checkboxes. This example also uses fieldset/Legend elements to provide a grouping label for the checkboxes since the checkboxes are related to each other.

Similar examples include:

Example

Sandwich Condiments

Keyboard Support

Key Function
Tab
  • Moves keyboard focus to the checkbox.
Space,
or Enter
  • Toggle the checkbox between unchecked, mixed and checked.
  • When the checkbox is unchecked, all the controlled checkboxes will be unchecked.
  • When the checkbox is mixed, all the controlled checkboxes will return to the last state the user selected for that particular checkbox or the default state when the page was loaded.
  • When the checkbox is checked, all the controlled checkboxes will be checked.

Role, Property, State, and Tabindex Attributes

Role Attribute Element Usage
checkbox div
  • The role="checkbox" attribute identifies the div element as a ARIA checkbox.
  • The accessible name comes the child text content of the div[role="checkbox"] element.
  • The checkbox widget needs a tabindex="0" value.
tabindex="0" div
  • The div["checkbox"] is identified as an interactive element and is added to the tab order of the page by setting the tabindex="0".
aria-controls="[IDREFS]" div
  • A list of IDREFs identifies which checkboxes are controlled by the mixed checkbox.
aria-checked="false" div
  • Indentifies the checkbox button as not unchecked.
  • This state reflects that all the controlled checkboxes are unchecked.
  • CSS attribute selectors (e.g. [aria-checked="false"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS :before psuedo selector and the content property are used to indcate visual state of "unchecked" to support high contrast setting in operating systems and browsers.
aria-checked="true" div
  • Indentifies the checkbox as checked.
  • This state reflects that all the controlled checkboxes are checked.
  • CSS attribute selectors (e.g. [aria-checked="true"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS :before psuedo selector and the content property are used to indcate visual state of "checked" to support high contrast setting in operating systems and browsers.
aria-checked="mixed" div
  • Indentifies the checkbox as mixed.
  • This state reflects that some of controlled checkboxes are all checked and some are not checked.
  • CSS attribute selectors (e.g. [aria-checked="mixed"]) are used to synchronize the visual states with the value of the aria-checked attribute.
  • The CSS :before psuedo selector and the content property are used to indcate visual state of "mixed" to support high contrast setting in operating systems and browsers.

Javascript and CSS Source Code

HTML Source Code