Short Name (link to it in the WCAG)	Plain language summary of requirements	Who does it help and how?	SC #	Lvl
Status Changes	For HTML pages, when there is a visible status message, this requires authors to use aria-live roles or attributes to notify AT users when something on the page changes. (With exceptions)	Users of AT who can't see changes or have trouble perceiving visible status messages on a page, such as shopping cart updates. Their AT will announce the status message that was visibly added to the page.	3.2.6	AA

 

Note: See also blog on testing using display:none to block OR using innerhtml

We'll test all the live region roles

The following roles are live regions and may be modified by live region attributes.

• alert (aria-live="assertive", aria-atomic="true", browser SHOULD trigger system event)
• log (aria-live="polite")
• marquee (aria-live="off")
• status (aria-alive="polite", aria-atomic="true")
• timer (aria-live="off")

Live Region dialog

• alertdialog (aria-live="assertive", aria-atomic="true", browser SHOULD trigger system even)

Live region

• aria-live (values of polite and assertive)

Example 1: Test aria-live injected with innerHTML

 

Inject wth innerHTML

Example 2 Test aria-live by turning display:none to block

Turn on display:block

Code Used Example 1

<div aria-live="polite"><p id="demo" ></p></div>
<button onclick="myfun()">click me</button>

Javascript

function myfun() {
document.getElementById("demo").innerHTML = "Hello World!";
}

Code Used Example 2

<div aria-live="polite" style="display:none" id="demo2"><p >Hello world</p> </div>
<button onclick="myfun2()">click me</button>


Javascript

<script>
function myfun2() {
document.getElementById('demo2').style.display = 'block';
}
</script>

Example 3: Test role="alert"

An Alert

Example 4: Test role="log"

A Log

Example 5: Test role="marquee"

A Marquee

Example 6: Test role="status"

Status

Example 7: Test role="timer"

Timer

Example 8: Test role="status" on a button

Status

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.