Question

我已经看到这个在一些网站上工作的环境完全相同，但它对我自己非常简单的代码不起作用，即使我从工作站点复制了具有相同aria属性的相同标记。

环境：OS X El Capitan上的Safari 9.1.2 +配音

我尝试改变aria-atomic，aria-live，aria-relevant，每当我向live区域添加一些新内容时，它总是从live区域的开头读取。任何想法为什么它不起作用以及如何使其发挥作用？

HTML

<label for="speak-content"></label>
<input id="speak-content" type="text">
<button id="speak">add some stuff to read</button>
<div id="live-region" role="alert" aria-live="polite" aria-atomic="false" aria-relevant="additions"></div>

的javascript

$("#speak").on("click", function(event) {
    var liveRegion = $("#live-region");
    var content = $("#speak-content").val();
    var p = $("<p>").text(content);
    liveRegion.append(p);
});

Answer 1

尝试使用aria-atomic=true。如果未定义aria-atomic，则默认为false，屏幕阅读器将读取整个实时区域。如果您只是希望屏幕阅读器宣布已更改的内容（例如倒计时或结果计数），请使用aria-atomic=true。 Read more about aria-atomic at W3C

另一个注意事项，但不是您的问题：role=alert与aria-live=assertive相同。使用role=status来匹配您对aria-live=polite的使用情况。否则，您将向浏览器提供相互矛盾的信息。

为什么总是从现场区域的开头读取语音？

1 个答案: