为屏幕阅读器动态添加元素：aria-live Vs角色警报

Question

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

以下两者之间有什么区别：添加'role = alert'属性对'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值继承assertive和aria-live，因此从用户的角度来看， 的行为应该类似。但是，并非所有用户代理都以相同的方式实现规范。

您在可用时使用适当角色的w3c recommends，优先于通用的咏叹调生活区域。这伴随着用户代理历来在两者之间显示inconsistent behaviors的警告。

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