为屏幕阅读器动态添加元素：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

默认情况下，role='alert' 继承 aria-atomic 和 aria-live 并具有 assertive 值，因此应该从用户的角度来看类似的行为。但是，并非所有用户代理都以相同的方式实现规范。

w3c recommends 在可用时使用适当的角色，而不是通用的 aria-live 区域。这伴随着用户代理历史上在两者之间显示inconsistent behaviors的警告。

针对 HTML5 Accessibility's alert test page 的测试表明 ChromeVox 1.27.0 支持您展示的技术，而 OS X 10.8.4 上的 VoiceOver 与 Safari 不支持。