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

Status Changes


Short Name (link to it in the WCAG)

Plain language summary of requirements

Who does it help and how?


SC #

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>


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>


function myfun2() {
document.getElementById('demo2').style.display = 'block';

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.


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


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


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