3

我正在努力使视障者可以通过屏幕阅读器访问动态 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>

4

1 回答 1

1

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

查看这个assertiveAnnouncejQuery 库中的函数，了解适用于许多不同浏览器的代码。

于 2014-12-15T00:50:39.467 回答