Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Status Changes
withinnerHTML

 

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

Example 1: Test aria-live injected with innerHTML

 




Example 2 Test aria-live by turning display:none to 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"

Example 4: Test role="log"

Example 5: Test role="marquee"

Example 6: Test role="status"

Example 7: Test role="timer"

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

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.





CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA