JavaScript Element ariaChecked Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIACHECKED

Definition

In JavaScript, the ariaChecked property of Element reflects the aria-checked attribute, which indicates the current “checked” state of checkboxes, radio buttons, and other widgets that have a checked state (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaChecked. Start with this line.

JavaScript
el.ariaChecked
CallWhat it does
el.ariaCheckedPrimary signature.

Built into the browser. Read or assign el.ariaChecked — no import required.

Library declarations
JavaScript
el.ariaChecked

Parameters

ParameterDescription
Checkable widgetRequired. Native input or custom role + keyboard
String valueRequired. "true" / "false" / "mixed" / "undefined"
LabelRequired. Visible label or aria-labelledby / aria-label

Return Value

Return ValueDescription
*The current value of el.ariaChecked.

JavaScript Examples

Example 1 — Read ariaChecked

MDN-style custom checkbox: read the reflected string.

JavaScript
const el = document.getElementById("checkBoxInput");
console.log(el.ariaChecked); // "false"
Try It Yourself

How It Works

  1. Select the widget. MDN’s sample uses role="checkbox".
  2. Read ariaChecked. Returns the reflected aria-checked string.
  3. Expect a string. Here "false" means unchecked but checkable.
  4. Prefer native when possible. Real forms often need no ARIA at all.

Example 2 — Get and Set (MDN)

Assign "true" to mark the custom checkbox checked.

JavaScript
const el = document.getElementById("checkBoxInput");
console.log(el.ariaChecked); // "false"
el.ariaChecked = "true";
console.log(el.ariaChecked); // "true"
Try It Yourself

How It Works

  1. Log the start value. Often "false" from HTML.
  2. Assign a string. Use "true", not boolean true.
  3. Read again. Confirms the property (and attribute) updated.
  4. Keep UI in sync. Update visible check mark / icon in the same handler.

Example 3 — Toggle on Activate

Flip between "true" and "false" when the widget is activated.

JavaScript
const el = document.getElementById("checkBoxInput");

function toggle() {
  el.ariaChecked = el.ariaChecked === "true" ? "false" : "true";
  console.log("now:", el.ariaChecked);
}

el.addEventListener("click", toggle);
el.addEventListener("keydown", (event) => {
  if (event.key === " " || event.key === "Enter") {
    event.preventDefault();
    toggle();
  }
});
Try It Yourself

How It Works

  1. Define a toggle. Swap "true" and "false".
  2. Handle click. Mouse / tap users can activate.
  3. Handle keyboard. Space and Enter are common for checkboxes.
  4. Prevent scroll on Space. Call preventDefault() when needed.
Compatibility

Browser Support

Element.ariaChecked is Baseline Widely available (MDN: across browsers since October 2023). It is not Deprecated, Experimental, or Non-standard.

✓ Baseline Widely available

Element.ariaChecked

Reflects aria-checked as true, false, mixed, or undefined. Prefer native checkboxes when possible.

Baseline Widely available
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
ariaChecked Baseline

Bottom line: Safe for modern apps. Use string values, keep custom widgets keyboard-accessible, and prefer native inputs for simple forms.

Frequently Asked Questions

It reflects the aria-checked attribute as a string, indicating the current checked state of checkboxes, radio buttons, and other widgets that have a checked state (MDN).
No. MDN marks Element.ariaChecked as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
One of the strings "true", "mixed", "false", or "undefined" (MDN).
Yes when possible. MDN recommends an HTML input with type="checkbox" because it has built-in semantics and does not require ARIA attributes.
A tri-state value for a checkbox or menuitemcheckbox — neither fully checked nor unchecked (for example a parent with some children selected).
Yes. Reading and writing ariaChecked updates the reflected aria-checked attribute.

Next: ariaColCount

Learn the Element property that reflects aria-colcount for tables and grids.

ariaColCount tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Element ariaBusy Property JavaScript Element ariaColCount Property