ContextQMD
Back to Content

ARIA: aria-checked attribute

files/en-us/web/accessibility/aria/reference/attributes/aria-checked/index.md

latest3.9 KB
Original Source

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

[!NOTE] Where possible use an HTML {{htmlelement("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.

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

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:

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

By using the {{htmlelement("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:

Associated interfaces

  • {{domxref("Element.ariaChecked")}}
    • : The ariaChecked property, part of the {{domxref("Element")}} interface, reflects the value of the aria-checked attribute.
  • {{domxref("ElementInternals.ariaChecked")}}
    • : The ariaChecked property, part of the {{domxref("ElementInternals")}} interface, reflects the value of the aria-checked attribute.
js
myHTMLElement.ariaChecked = true;

Specifications

{{Specifications}}

See also