JavaScript Element ariaRelevant Property

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

Definition

Element.ariaRelevant reflects the aria-relevant attribute: which notifications the user agent triggers when the accessibility tree inside a live region changes (MDN). It filters which updates in an aria-live region should be announced.

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

Syntax

Use el.ariaRelevant. Start with this line.

JavaScript
el.ariaRelevant / el.ariaRelevant = value
CallWhat it does
el.ariaRelevant / el.ariaRelevant = valuePrimary signature.

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

Library declarations
JavaScript
el.ariaRelevant / el.ariaRelevant = value

Parameters

ParameterDescription
Live regionRequired. Usually needs aria-live (or a live role)
Token stringOptional. Defaults to additions text when unset
aria-atomicOptional. Whether to read the whole region or just the change

Return Value

Return ValueDescription
*The current value of el.ariaRelevant.

JavaScript Examples

Example 1 — Read ariaRelevant

Log the current relevant tokens from a live region.

JavaScript
const el = document.getElementById("clock");
console.log(el.ariaRelevant); // "all"

// HTML: aria-live="polite" aria-relevant="all" …
Try It Yourself

How It Works

  1. Find the region. getElementById("clock") returns the live-region node.
  2. Read the reflection. ariaRelevant returns the aria-relevant string.
  3. Interpret "all". Additions, removals, and text changes are all relevant.
  4. Missing attribute. If unset, many browsers return null; AT default is still additions text.

Example 2 — Narrow to "text" (MDN)

MDN: update from "all" to text-only relevance.

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

console.log(el.ariaRelevant); // "all"
el.ariaRelevant = "text";
console.log(el.ariaRelevant); // "text"
console.log(el.getAttribute("aria-relevant")); // "text"
Try It Yourself

How It Works

  1. Start broad. The first log shows "all".
  2. Assign the property. el.ariaRelevant = "text" updates the reflected attribute.
  3. Confirm both sides. Property and getAttribute both report "text".
  4. Effect. Later DOM text updates are relevant; treating every addition/removal as relevant is no longer requested.

Example 3 — Space-Separated Tokens

Combine tokens explicitly (same idea as the default pair).

JavaScript
const el = document.createElement("div");
el.setAttribute("role", "status");
el.setAttribute("aria-live", "polite");

el.ariaRelevant = "additions text";
console.log(el.ariaRelevant);                  // "additions text"
console.log(el.getAttribute("aria-relevant")); // "additions text"

el.ariaRelevant = "all";
console.log(el.ariaRelevant); // "all"
Try It Yourself

How It Works

  1. Create a live region. role="status" + aria-live="polite" is a common pattern.
  2. Set two tokens. A space-separated list matches the default-like additions text.
  3. Verify reflection. Property and attribute store the same string.
  4. Shorthand. "all" means additions + removals + text in one token.
Compatibility

Browser Support

Element.ariaRelevant is listed as Baseline Widely available (MDN: since October 2023), but the IDL property is also marked Non-standard.

✓ Non-standard · Baseline

Element.ariaRelevant

Present in modern Chromium, Firefox, Safari, and Edge. Treat as Non-standard for production planning; the aria-relevant attribute itself is the ARIA concept used with live regions.

90% Modern browser presence
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
Element.ariaRelevant Use carefully

Bottom line: Available widely as an IDL reflection, but MDN marks it Non-standard. Prefer well-tested live-region markup and verify announcements with assistive technologies.

Frequently Asked Questions

It reflects the aria-relevant attribute as a string that tells which changes inside an aria-live region should trigger assistive technology notifications: additions, removals, text, or all.
MDN marks Element.ariaRelevant as Non-standard. It is also listed as Baseline Widely available (since October 2023). It is not labeled Deprecated or Experimental on that MDN page.
A space-separated string of one or more tokens: "additions", "removals", "text", or "all" (shorthand for "additions removals text").
When unset on the region and its ancestors, the effective default is "additions text" — node additions and text changes are relevant; removals usually are not (MDN).
ariaLive turns on a live region and sets urgency (polite / assertive / off). ariaRelevant filters which kinds of DOM changes inside that region are announced.
Use carefully. MDN marks the Element.ariaRelevant IDL property Non-standard and does not recommend non-standard features in production. Prefer well-supported live-region patterns and test with real screen readers.

Next: ariaRequired

Learn the reflected aria-required property for required form widgets.

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

11 people found this page helpful

JavaScript Element ariaReadOnly Property JavaScript Element ariaRequired Property