ARIA `checkbox` Role Example: Mixed state checkbox

This example illustrates the use of a mixed state checkbox (e.g. all condiments) with a set of standard HTML checkboxes (e.g, condiments options).
Changing the state of the standard checkboxes will update the state for the ARIA mixed checkbox.
Changing the state of the ARIA mixed checkbox will also update the state of the standard HTML checkboxes.
role="checkbox" is not applied to the standard checkboxes but is to the aria checkbox.

Checkbox example with fieldset and legend: used "label for"

Sandwich Condiments

All condiments

Lettuce Tomato Mustard Sprouts

div[role=checkbox] element identifies the divelement as a mixed state checkbox (e.g. All Condiments checkbox).
aria-labelledby attribute is used to identify the grouping label(e.g. Sandwitch Condiments) for all of the checkboxes.
Note: grouping label is the second Id so that grouping label is read after checkbox label. So screen reader users hear checkbox label before the grouping label.
div[role=checkbox] element has onkeydown event to support keyboard activation of the checkbox.
div[role=checkbox] element has tabindex="0" to become part of the tab order of the page.
img element is used to visually indicate the state of mixed checkbox because using css techniques or generated content result in visual state disappearing when browsers or operating systems are configured to display high contrast themes.
toggleGroupCheckbox(event) uses aria-checked attribute to make sure the information communicated to asssitive tecnology is the same as the visual state (e.g. img element).
onfocus and onblur event handlers on both aria checkbox and standard HTML checkboxes support visual focus styling for keyboard only users.

Key	Function
Tab	Moves keyboard focus to checkbox.
Space	Toggle the checkbox option either true, false or mixed. False is the default.

Role	Property/State	Usage
checkbox		Identify div as Checkbox widget
aria-checked		Indicate state of checkbox: Checked (e.g. aria-checked=true) Unchecked (e.g. aria-checked=false) Mixed (e.g. aria-checked=mixed)
aria-labelledby		Used to include grouping label in the label of each checkbox