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 DOMString
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