Roles

WAI-ARIA: Role=Checkbox

Authored By :Raghavendra Satish Peri Last Updated :April 24, 2024 Roles

A checkable input that has three possible values: true, false, or mixed.

Description

A checkable input that has three possible values: true, false, or mixed.

The aria-checked attribute of a checkbox indicates whether the input is checked (true), unchecked (false), or represents a group of elements that have a mixture of checked and unchecked values (mixed). Many checkboxes do not use the mixed value, and thus are effectively boolean checkboxes.

Screen Reader Support For Role=CheckBox

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
Expectation	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
MUST convey its role	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported
MUST convey its name	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported

Role=CheckBox Example

HTML Example

<p><input type="checkbox" role="checkbox" aria-checked="false">I agree to the terms</p>

HTML Example 2

<span role="checkbox"
aria-checked="true"tabindex="0"id="simulatedcheckbox"></span>

Characteristics

Superclass Role

input

Subclass Roles

menuitemcheckbox
switch

Related Concepts

HTML input[type=”checkbox”]
option

Required States and Properties

aria-checked

Supported States and Properties

aria-readonly

Inherited States and Properties

Name From

contents
author

Accessible Name Required

True

Children Presentational

True

Implicit Value for Role

Default for aria-checked is false.

Semantic HTML

Use the HTML type=“checkbox” attribute on the <input> tag.

<input id="checkBox" type=”checkbox”>

Reference

WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=checkbox.
A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=checkbox.

Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.