NVDA reading dynamically-added content twice

Question

I'm working on making a dynamic web application accessible to the visually impaired via screen readers, and I'm running into an annoying problem. When I test my code (see below) with JAWS, it works perfectly fine. But when I use NVDA, I'm getting the dynamically-added content is being read TWICE by this reader in Firefox, and not being read at all in IE9.

Has anyone ever seen this kind of behavior before?

<!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 is an invalid value for the role attribute. I am not sure if that would do anything. — Ryan B
You should probably look into the aria-live attribute, along with aria-busy. — jedd.ahyoung

unobf unobf · Accepted Answer · 2014-12-15T00:50:39

Set role="log" and aria-live="assertive" to the inlineErrors div. Then simply insert other DIVs into that div for your errors and it should only be read out once.

Look at the assertiveAnnounce function in this jQuery library for code that works across many different browsers.

NVDA reading dynamically-added content twice

1 Answers