Element.ariaRelevant
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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
BCD tables only load in the browser