Checkbox Example (Mixed-State)

Important Note About Use of This Example

Note: 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-AT project plans to provide measurements of this example's assistive technology support by the end of 2020.
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.

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.

This example also demonstrates use of fieldset and Legend elements for labeling the checkbox group.

Similar examples include:

Checkbox (Two State): Simple two state checkbox.

Example

Sandwich Condiments

All condiments

Lettuce
Tomato
Mustard
Sprouts

Keyboard Support

Key	Function
`Tab`	Moves keyboard focus among the checkboxes.
`Space`	Cycles the tri-state checkbox among unchecked, mixed, and checked states. When the tri-state checkbox is unchecked, all the controlled checkboxes are unchecked. When the tri-state checkbox is mixed, the controlled checkboxes return to the last combination of states they had when the tri-state checkbox was last mixed or to the default combination of states they had when the page loaded. When the tri-state checkbox is checked, all the controlled checkboxes are checked.

Key

Function

Tab

Moves keyboard focus among the checkboxes.

Space

Cycles the tri-state checkbox among unchecked, mixed, and checked states.
When the tri-state checkbox is unchecked, all the controlled checkboxes are unchecked.
When the tri-state checkbox is mixed, the controlled checkboxes return to the last combination of states they had when the tri-state checkbox was last mixed or to the default combination of states they had when the page loaded.
When the tri-state checkbox is checked, all the controlled checkboxes are checked.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`checkbox`		`div`	Identifies the `div` element as a `checkbox`. The child text content of this `div` provides the accessible name of the checkbox.
	`tabindex="0"`	`div`	Includes the checkbox in the page tab sequence.
	`aria-controls="[IDREFS]"`	`div`	identifies the set of checkboxes controlled by the mixed checkbox.
	`aria-checked="false"`	`div`	Indicates the tri-state `checkbox` is not checked. In this state, all 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. 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.
	`aria-checked="true"`	`div`	Indicates the tri-state `checkbox` is checked. In this state, all 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. 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.
	`aria-checked="mixed"`	`div`	Indicates the tri-state `checkbox` is mixed. In this state, some controlled checkboxes are unchecked and some are checked. CSS attribute selectors (e.g. `[aria-checked="mixed"]`) 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.

Javascript and CSS Source Code

CSS: checkbox.css
Javascript: checkboxMixed.js
Javascript: controlledCheckbox.js

HTML Source Code

<fieldset>
  <legend>
    Sandwich Condiments
  </legend>
  <div role="checkbox"
       class="group_checkbox"
       aria-checked="mixed"
       aria-controls="cond1 cond2 cond3 cond4"
       tabindex="0">
    All condiments
  </div>
  <ul class="checkboxes">
    <li>
      <label>
        <input type="checkbox" id="cond1">
        Lettuce
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox"
               id="cond2"
               checked="">
        Tomato
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" id="cond3">
        Mustard
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" id="cond4">
        Sprouts
      </label>
    </li>
  </ul>
</fieldset>
<script type="text/javascript">
  function checkboxFocus (event) {
    event.currentTarget.parentNode.classList.add('focus');
  };
  function checkboxBlur (event) {
    event.currentTarget.parentNode.classList.remove('focus');
  };
  window.onload = function () {
    var i;
    var mixed = document.querySelectorAll('[role="checkbox"]');
    for (i = 0; i < mixed.length; i++) {
      var m = new CheckboxMixed(mixed[i]);
      m.init();
    }
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (i = 0; i < checkboxes.length; i++) {
      var cb = checkboxes[i];
      cb.addEventListener('focus', checkboxFocus);
      cb.addEventListener('blur', checkboxBlur);
    }
  };
</script>