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) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 |
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
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
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
- W3C (opens new window)
- A11Y Support