aria-checked

The aria-checked attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

Note: Where possible use an HTML <input> element with type="checkbox" and type="radio" as these have built in semantics and do not require ARIA attributes.

Description

The aria-checked attribute indicates whether the element is checked (true), unchecked (false), or if the checked status is indeterminate (mixed), meaning it is neither checked nor unchecked. The mixed value is supported by the tri-state input roles of checkbox and menuitemcheckbox.

The mixed value is not supported on radio, menuitemradio, or switch and elements that inherits from these. The value will be false if mixed is set when not supported.

<span role="checkbox" id="checkBoxInput" aria-checked="false" tabindex="0" aria-labelledby="chk15-label"></span> 
<label id="chk15-label">Subscribe to the newsletter</label>

Note: Where possible use an HTML <input> element with type="checkbox" as this element has built in semantics and does not require ARIA attributes.

The tabindex attribute is required to enable focus. JavaScript is required to toggle the aria-checked state. And, if this checkbox is part of a submittable form, more JavaScript is required to set a name and a value.

The above could have been written as:

<input type="checkbox" id="chk15-label" name="Subscribe">
<label for="chk15-label">Subscribe to the newsletter</label>

By using the <input> element with type="checkbox" instead of ARIA, there is no need for any JavaScript.

Values

false: The element supports being checked but is not currently checked.
true: The element is checked.
mixed: for checkbox and menuitemcheckbox only, equivalent to indeterminate, indicating a mixed mode value of neither checked nor unchecked.
undefined (default): The element does not support being checked.

Associated roles

Used in roles:

ARIAMixin API

Element.ariaChecked: The ariaChecked property, part of the Element interface, reflects the value of the aria-checked attribute.
ElementInternals.ariaChecked: The ariaChecked property, part of the ElementInternals interface, reflects the value of the aria-checked attribute.

myHTMLElement.ariaChecked = true;

Specifications

Specification	Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1 The definition of 'ARIA: aria-checked Attribute' in that specification.	Recommendation
WAI-ARIA Authoring Practices 1.2 The definition of 'Checkbox role with `aria-checked`' in that specification.	Unknown