ARIA checkbox: Mixed State Checkbox with Grouping Label
Authoring Practice Design Patten for Checkbox
- 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/legendelements. - Labels for standard checkboxes come from
labelencapsulation 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.
2. Checkbox example with role = group
- Grouping label “sandwich condiments” defined using
role=groupandaria-label. - Labels for standard checkboxes come from
labelencapsulation 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
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-labelledbyreferencingdivelement, ''sandwitch condiments" and followingspanelement (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.
divelement with rolecheckboxidentifies thedivelement as a checkbox (e.g. All Condiments checkbox), which supports a mixed state.divelement with rolecheckboxhasonkeydownevent to support keyboard activation of the checkbox.divelement with rolecheckboxhasonclickevent to support mouse pointer activation of the checkbox.divelement with rolecheckboxhastabindex="0"to become part of the tab order of the page.-
imgelement 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)usesaria-checkedattribute to determine which image is displayed to ensure the information communicated to asssitive tecnology is the same as the visual state (e.g.imgelement).onfocusandonblurevent handlers on both aria checkbox and standard HTML checkboxes support visual focus styling for keyboard only users.
Keyboard Support
| Key | Function |
|---|---|
| Tab | Moves keyboard focus to checkbox. |
| Space | Toggle the checkbox option either true, false or mixed. False is the default. |
ARIA Roles, Properties and States
| Role | Property/State | Usage |
|---|---|---|
| checkbox | Identify div as Checkbox widget | |
| aria-checked |
Indicate state of checkbox:
|
|
| aria-labelledby | Used to include grouping label in the label of each checkbox |
Source Code
- CSS: checkbox.css
- Javascript: checkbox.js
HTML Code
1. Checkbox example with fieldset and legend
<div>
<fieldset>
<legend>
Sandwich Condiments
</legend>
<div role="checkbox"
class="group_checkbox"
aria-checked="false"
tabindex="0"
onclick="toggleGroupCheckbox(event)"
onkeydown="toggleGroupCheckbox(event)"
onfocus="focusCheckbox(event)"
onblur="blurCheckbox(event)">
<img src="./images/checkbox-unchecked-black.png" alt="">
All condiments
</div>
<label>
<input type="checkbox">
Lettuce
</label>
<label>
<input type="checkbox">
Tomato
</label>
<label>
<input type="checkbox">
Mustard
</label>
<label>
<input type="checkbox">
Sprouts
</label>
</fieldset>
</div>
2. Checkbox example with role = group
<div>
<div role="group" aria-label="sandwitch condiment">
<div>
Sandwich Condiments
</div>
<div role="checkbox"
class="group_checkbox"
aria-checked="false"
tabindex="0"
onclick="toggleGroupCheckbox(event)"
onkeydown="toggleGroupCheckbox(event)"
onfocus="focusCheckbox(event)"
onblur="blurCheckbox(event)">
<img src="./images/checkbox-unchecked-black.png" alt="">
All condiments
</div>
<label>
<input type="checkbox">
Lettuce
</label>
<label>
<input type="checkbox">
Tomato
</label>
<label>
<input type="checkbox">
Mustard
</label>
<label>
<input type="checkbox">
Sprouts
</label>
</div>
</div>
3. Checkbox example with aria-labelledby
<div>
<div>
Sandwich Condiments
</div>
<div role="checkbox"
class="group_checkbox"
aria-checked="false"
aria-labelledby="label0 group1"
tabindex="0"
onclick="toggleGroupCheckbox(event)"
onkeydown="toggleGroupCheckbox(event)"
onfocus="focusCheckbox(event)"
onblur="blurCheckbox(event)">
<img src="./images/checkbox-unchecked-black.png" alt="">
<span>
All condiments
</span>
</div>
<div class="checkbox">
<input type="checkbox" aria-labelledby="label1 group1">
<span>
Lettuce
</span>
</div>
<div class="checkbox">
<input type="checkbox" aria-labelledby="label2 group1">
<span>
Tomato
</span>
</div>
<div class="checkbox">
<input type="checkbox" aria-labelledby="label3 group1">
<span>
Mustard
</span>
</div>
<div class="checkbox">
<input type="checkbox" aria-labelledby="label4 group1">
<span>
Sprouts
</span>
</div>
</div>