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
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
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

Example

HTML Example

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

Characteristics

Used in Roles

• checkbox
• option
• radio
• switch

Inherits into Roles

• menuitemcheckbox
• menuitemradio
• treeitem

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