JavaScript Element ariaAtomic Property

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

Definition

Element.ariaAtomic reflects the aria-atomic attribute (MDN). It tells assistive technologies whether to present the entire changed live region ("true") or only the changed parts ("false"), based on change notifications from aria-relevant.

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

Syntax

Use el.ariaAtomic. Start with this line.

JavaScript
element.ariaAtomic
CallWhat it does
element.ariaAtomicPrimary signature.

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

Library declarations
JavaScript
element.ariaAtomic

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*The current value of el.ariaAtomic.

JavaScript Examples

Example 1 — Read ariaAtomic (MDN)

Read the reflected string from a timer live region.

JavaScript
const el = document.getElementById("clock");
console.log(el.ariaAtomic);
// → "true"
Try It Yourself

How It Works

  1. HTML sets aria-atomic="true". Attribute is present.
  2. Property reflects it as the string "true".
  3. Log or branch on that string in your script.
  4. Remember: it is text, not a boolean.

Example 2 — Set to "false" (MDN)

Update the property; the attribute follows.

JavaScript
const el = document.getElementById("clock");
console.log(el.ariaAtomic); // "true"

el.ariaAtomic = "false";
console.log(el.ariaAtomic); // "false"
Try It Yourself

How It Works

  1. Assign a string. Use "false" or "true".
  2. Attribute updates to match (aria-atomic).
  3. AT behavior changes for later content updates.
  4. Prefer strings that match the HTML attribute values.

Example 3 — Toggle Atomic Mode

Flip between whole-region and partial announcements.

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

el.ariaAtomic = el.ariaAtomic === "true" ? "false" : "true";
console.log("now:", el.ariaAtomic);
Try It Yourself

How It Works

  1. Compare to "true" as a string.
  2. Assign the other value. Simple flip for demos/settings.
  3. Log the new mode so you can verify the change.
  4. In real UIs, pick a stable mode for the widget type.
Compatibility

Browser Support

Element.ariaAtomic is Baseline Widely available on MDN (across browsers since October 2023). Safe to use for reflecting aria-atomic on live regions.

✓ Baseline Widely available

Element.ariaAtomic

Reflect aria-atomic for live regions — widely supported.

Wide Baseline
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
ariaAtomic Widely available

Bottom line: Use string "true" / "false". Pair with aria-live (and often aria-relevant). Reading/writing updates the aria-atomic attribute.

Frequently Asked Questions

It reflects the aria-atomic attribute as a string ("true" or "false"), telling assistive technologies whether to present the whole changed live region or only the changed parts (MDN).
No. MDN marks Element.ariaAtomic as Baseline Widely available (across browsers since October 2023). It is not Deprecated, Experimental, or Non-standard.
The string "false" (present only changed nodes) or "true" (present the entire changed region as a whole, including an author-defined label if one exists) (MDN).
aria-atomic is usually set on a live region (for example with aria-live="polite"). aria-relevant shapes which changes are announced; aria-atomic controls how much of the region is spoken when a change is relevant (MDN).
Strings. Assign "true" or "false" as text to match the attribute, not boolean literals.
Yes. Reading and writing ariaAtomic updates the reflected aria-atomic attribute, as in MDN’s clock timer example.

Next: ariaAutoComplete

Learn how aria-autocomplete describes input suggestion behavior.

ariaAutoComplete 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)

14 people found this page helpful

JavaScript Element ariaActiveDescendantElement Property JavaScript Element ariaAutoComplete Property