Element: ariaRelevant property
Baseline
2023
Newly available
Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The ariaRelevant property of the Element interface reflects the value of the aria-relevant attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an aria-live region are relevant and should be announced.
Value
A string containing one or more of the following values, space separated:
"additions"-
Additions of Element Nodes within the live region should be considered relevant.
"removals"-
Deletion of Nodes from the live region should be considered relevant.
"text"-
Changes to the textual content of existing nodes should be considered relevant.
"all"-
Equivalent to
"additions removals text".
Examples
In this example the aria-relevant attribute on the element with an ID of text is set to "all". Using ariaRelevant we update the value to "text".
<div
id="clock"
role="timer"
aria-live="polite"
aria-atomic="true"
aria-relevant="all"></div>
let el = document.getElementById("clock");
console.log(el.ariaRelevant); // all
el.ariaRelevant = "text";
console.log(el.ariaRelevant); // text
Browser compatibility
Loading…