screen-readers - 为屏幕阅读器动态添加元素：aria-live Vs role-alert

Question

我有一个应用程序，其中元素被动态添加到页面中，我希望屏幕阅读器能够为不同版本的浏览器（IE 8/9/10、FF 和 Chrome）读取它们。

以下两者有什么区别：添加 'role=alert' 属性 Vs 'aria-live=assertive'？

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

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

Answer 1

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.