Tri-State Checkbox With Grouping Label Examples

Following are three example implementations of the design pattern for checkbox that demonstrate how to make a widget that uses the mixed value for aria-checked. These examples also show three different ways of labeling a collection of checkboxes so screen reader users can perceive that all members of the collection are part of a logical group.

In the below examples, a set of checkboxes is used to choose condiments for a sandwich. The user can use the first checkbox, labeled "All Condiments", to quickly specify a desire for either all or none of the condiments. If the user chooses to have some but not all condiments, the "All Condiments" checkbox will reflect that state as "partially checked"; this is the mixed value of aria-checked.

Examples

Note that the conditions and actions that cause screen readers to announce the grouping labels in the following 3 examples vary from one screen reader to another; such assistive technology behaviors are not standardized.

Example 1: group label using fieldset and legend

This is the preferred implementation whenever feasible.

Sandwich Condiments

All condiments

Lettuce Tomato Mustard Sprouts

In this implementation:

• The grouping label, "sandwich condiments", is defined by putting the group label in a legend element within a fieldset element that wraps the set of checkboxes.
• The tri-state checkbox is labeled by content, e.g., it comes from the child text nodes of the element with role=checkbox.
• The individual condiment checkboxes are labeled by wrapping the input and the labeling text in a label element.

Example 2: Group Label Using role = group

Sandwich Condiments

All condiments

Lettuce Tomato Mustard Sprouts

In this implementation:

• The grouping label, “sandwich condiments”, is set by applying aria-label to a div with role group.
• The tri-state checkbox is labeled by content, e.g., it comes from the child text nodes of the element with role=checkbox.
• The individual condiment checkboxes are labeled by wrapping the input and the labeling text in a label element.

Example 3: Group Label Appended to Individual Checkbox Labels

Sandwich Condiments

All condiments

Lettuce

Tomato

Mustard

Sprouts

In this implementation:

• A grouping label is not defined. Instead, "sandwitch condiments" is appended to the label for each checkbox by specifying multiple ID values in the aria-labelledby value.
• It is important that the group label is the second ID reference so that the condiment label, (e.g., "lettuce", is announced before the "sandwitch condiments"group label.
• Because this approach forces screen readers to repeat “sandwich condiments” for every checkbox, which may be distracting for some users, this approach is less desirable, especially when grouping a large set of controls.

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