ARIA checkbox: Mixed State Checkbox with Grouping Label

WAI-ARIA 1.1 : Checkbox pattern

• This example uses the native HTML5 semantics for grouping (e.g. fieldset/legend) and is the preferred technique for accessibility.
• This example illustrates the use of a mixed state checkbox (e.g. all condiments) with a set of standard HTML checkboxes, input type="checkbox" (e.g, condiments options).
• This set of examples also illustrates three different techniques for providing a grouping label.
• 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 only applied to the ARIA mixed checkbox.

Checkbox Examples

1. Checkbox example with fieldset and legend

• Grouping label "sandwich condiments" is defined using fieldset/legend elements.
• Labels for standard checkboxes come from label encapsulation technique.
• Label for ARIA mixed checkbox comes from child text content of the element with role=checkbox.
• Note: It is at the discretion of screen readers to determine when grouping labels are spoken.

Sandwich Condiments

All condiments

Lettuce Tomato Mustard Sprouts

2. Checkbox example with role = group

• Grouping label “sandwich condiments” defined using role=group and aria-label.
• Labels for standard checkboxes come from label encapsulation technique.
• Label for ARIA mixed checkbox comes from child text content of the element with role=checkbox.
• Note: It is at the discretion of screen readers to determine when grouping labels are spoken.

Sandwich Condiments

All condiments

Lettuce Tomato Mustard Sprouts

3. Checkbox example with aria-labelledby

• No grouping label is defined for this example. "sandwitch condiments" is included as part of the label for each checkbox.
• Labels for standard checkboxes and ARIA mixed checkbox come from aria-labelledby referencing div element, ''sandwitch condiments" and following span element (e.g. "all condiments", "lettuce", "tomato", "mustard", "sprouts").
• It is important that grouping label, "sandwitch condiments" is the second reference so that each different condiment option label (e.g. "lettuce") is read first and the same grouping label (e.g. "sandwitch condiments") is read second (e.g. aria-labelledby="label1 group1" will be read "lettuce, sandwitch condiments").
• Note: The screen readers will always include “sandwich condiments” (e.g. grouping label) when a checkbox receives keyboard focus, which can be distracting when navigating a long list of controls in the same group.

Sandwich Condiments

All condiments

Lettuce

Tomato

Mustard

Sprouts

Common Accessibility Features

• The examples use the native HTML5 semantics for checkboxes when possible (e.g. the non-mixed state checkboxes) and is the preferred technique for defining checkbox inputs.
• div element with role checkbox identifies the div element as a checkbox (e.g. All Condiments checkbox), which supports a mixed state.
• div element with role checkbox has onkeydown event to support keyboard activation of the checkbox.
• div element with role checkbox has onclick event to support mouse pointer activation of the checkbox.
• div element with role checkboxhas tabindex="0" to become part of the tab order of the page.
• img element is used to visually indicate the state of checkbox (e.g. checked, mixed, unchecked) to ensure the visual state will be visible when browsers or operating system use “High Contrast” settings by people with visual impairments. (Note: CSS background image 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 determine which image is displayed to ensure 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.

Keyboard Support

ARIA Roles, Properties and States

Source Code

• CSS: checkbox.css
• Javascript: checkbox.js

HTML Code

1. Checkbox example with fieldset and legend

2. Checkbox example with role = group

3. Checkbox example with aria-labelledby