Dynamically added elements for screen-reader : aria-live Vs role-alert

StackOverflow https://stackoverflow.com/questions/17977690

  •  04-06-2022
  •  | 
  •  

Question

I have an application where elements are added to the page dynamically and I want screen readers to read them for different versions of browsers ( IE 8/9/10, FF and Chrome).

What's the difference between the following two: adding a 'role=alert' attribute Vs 'aria-live=assertive'?

$("<div role='alert'>Sample message.</div>").appendTo($existingElement);

$("<div aria-live='assertive'>Sample message.</div>").appendTo($existingElement);
Was it helpful?

Solution

By default, role='alert' inherits aria-atomic and aria-live with an assertive value, so should behave similarly from a user's perspective. However, not all user agents implement specifications in the same way.

The w3c recommends that you use an appropriate role when available, in preference to a generic aria-live region. This comes with the caveat that user agents have historically shown inconsistent behaviors between the two.

Testing against HTML5 Accessibility's alert test page demonstrates that ChromeVox 1.27.0 supports the technique you showed, while VoiceOver on OS X 10.8.4 with Safari does not.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top