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

1
votes

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);
1
screen-readerswai-aria
You should also indicate which screen readers you intend to support. JAWS, NVDA, VoiceOver, ChromeVox, etc. Each of these behave differently from one another, and differently individual across browsers. – ckundo

1 Answers

3
votes

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.