Question

我正致力于通过屏幕阅读器为视障人士提供动态网络应用程序，而且我遇到了一个恼人的问题。当我使用JAWS测试我的代码（见下文）时，它完全正常。但是当我使用NVDA时，我会在Firefox中读取这个动态添加的内容TWICE，而不是在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>

Answer 1

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

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

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

1 个答案: