Element: ariaRelevant property
Baseline 2023Newly 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.
TheariaRelevant property of theElement interface reflects the value of thearia-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 anaria-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 thearia-relevant attribute on the element with an ID oftext is set to "all". UsingariaRelevant we update the value to "text".
<div role="timer" aria-live="polite" aria-atomic="true" aria-relevant="all"></div>let el = document.getElementById("clock");console.log(el.ariaRelevant); // allel.ariaRelevant = "text";console.log(el.ariaRelevant); // text