Scripting changes to the DOM can dynamically change the text. While sighted readers may see such changes, they may not be presented to readers using assistive technologies. An assistive technology will typically build its own copy of the DOM to operate on, so unless you alert it of a change, the new information will not be made available.
Creating a live region
To solve this problem, the WAI-ARIA specification includes the
attribute. When set, this attribute indicates that text is expected to be dynamically written to the
element, ensuring that when changes do occur they get picked up by the assistive technology.
<div id="results" aria-live="assertive"/>
When the attribute is set to the value
assertive it indicates that changes
should be announced to the reader as soon as they are written. When set to
polite, changes should be announced to the reader during an idle period.
It's not always the case that you want updates read as they happen. The
attribute can be used to tell the reading system to wait before announcing changes to the reader. Set the
true before writing. The reading system will wait until the
attribute is changed back to
false before announcing the changes.
<div id="results" aria-live="assertive" aria-busy="false"/>
Controlling what's read
WAI-ARIA also includes the
aria-atomic attribute for further control over what gets read. When set to
true, all text inside the element gets read regardless of what has been updated.
When set to
false, the reading system will only read the changed text.
<div id="results" aria-live="assertive" aria-busy="false" aria-atomic="true"/>
Controlling what gets noticed
aria-relevant attribute can be used to control the type of updates to read: element
additions), element deletions (
removals), text changes (
text) or all changes (
<div id="results" aria-live="assertive" aria-busy="false" aria-atomic="true" aria-relevant="all"/>
Default live regions
Setting any of the following values for an element's
role attribute automatically makes them
<div id="results" role="alert"/>