NVDA 两次读取动态添加的内容答案

【问题标题】：NVDA reading dynamically-added content twiceNVDA 两次读取动态添加的内容
【发布时间】：2012-06-11 22:27:09
【问题描述】：

我正在努力让视障者可以通过屏幕阅读器访问动态 Web 应用程序，但我遇到了一个烦人的问题。当我用 JAWS 测试我的代码（见下文）时，它工作得非常好。但是当我使用 NVDA 时，动态添加的内容在 Firefox 中被此阅读器读取两次，而在 IE9 中根本没有被读取。

以前有人见过这种行为吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <HEAD>
    <TITLE>Mike's Alert Test Page</TITLE>       
</HEAD>
<BODY>  
        <script type="text/javascript">
            function simulateErrors()
            {
                var elem = document.getElementById("inlineErrors");  

                if (elem != null && elem != undefined) {
                    elem.innerHTML = '<DIV role="alert">I am some alert text.</DIV>';
                }
            }
    </script>       
    <H1>Test Page</H1>
    <DIV ID="inlineErrors"  role="none"></DIV>
    <DIV ID="buttons">
        <!--<BUTTON onClick="simulateErrors()" type="button">Simulate Errors</BUTTON>-->
        <input type="submit" value="Simulate Errors" onClick="simulateErrors()"/>
    </DIV>
</BODY>

【问题讨论】：

None 是角色属性的无效值。我不确定这是否会做任何事情。
您可能应该查看 aria-live 属性以及 aria-busy。

标签： accessibility screen-readers jaws-screen-reader nvda

【解决方案1】：

将role="log" 和aria-live="assertive" 设置为inlineErrors div。然后只需将其他 DIV 插入到该 div 中以解决您的错误，它应该只被读出一次。

查看this jQuery 库中的assertiveAnnounce 函数，了解适用于许多不同浏览器的代码。

【讨论】：