WAI-ARIA: aria-checked (State)
Description
Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. See related aria-pressed and aria-selected.
The aria-checked attribute indicates whether the element is checked (true), unchecked (false), or represents a group of other elements that have a mixture of checked and unchecked values (mixed). Most inputs only support values of true and false, but the mixed value is supported by certain tri-state inputs such as a checkbox or menuitemcheckbox.
The mixed value is not supported on radio, menuitemradio, switch or any element that inherits from these in the taxonomy, and user agents MUST treat a mixed value as equivalent to false for those roles.
Browser Compatibility For aria-checked
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaChecked | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support For aria-checked
Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
MUST convey the “false” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
MUST convey the “true” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
MUST convey changes in value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
aria-checked Example
HTML Example
<span role="checkbox" aria-checked="true" tabindex="0" id="simulatedcheckbox"></span>
Characteristics
Used in Roles
Inherits into Roles
Values
- tristate:
Value representing true or false, with an intermediate “mixed” value. The default value for this value type is False, unless otherwise specified. - false
- The element supports being checked but is not currently checked.
- mixed
- Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.
- true
- The element is checked.
- undefined (default)
- The element does not support being checked.
Semantic HTML
Use the HTML “checked” attribute.
<form action=”/action_page.php”>
<input type=”checkbox” name=”vehicle” value=”Bike”> I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car” checked> I have a car<br>
<input type=”submit” value=”Submit”>
</form>
Reference
- W3C (opens new window)
- A11Y Support
- MDN Web Docs