Search code examples
htmljqueryaccessibilitywai-arianvda

Why isn't my jquery.html() and jquery.append() code readable by NVDA readers?

I can't seem to make an NVDA screen reader work with jQuery on the insertion of HTML to the DOM.

I need my application to meet accessibility standards (e.g. WAI-ARIA) with dynamic content being added to my page on an Ajax post-back.

Here is my code that is not being read by NVDA... what am I missing?

<html>
<head>

<script language="javascript" type="text/javascript">
    function addText() {
        document.getElementById("test").innerHTML = "some test";
}
</script>
</head>

<body>
<h2>NVDA</h2>

<div id="testarea">Some test area</div>
<div id="test" aria-describedby="testarea" aria-live="polite" aria-relevant="additions removals" role="region"></div><br />

<input type="button" value="click me" onclick="addText()" />
</body>
</html>
Solution

  • WCAG

    These are the WCAG recommendations about client-side scripting relating to the content update : http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

    In particular so far I've found

    ARIA

    about ARIA roles take a look at aria-live, aria-relevant, aria-atomic and alert properties:

    http://www.w3.org/TR/wai-aria/states_and_properties#aria-live

    Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

    http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant

    Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region. See related aria-atomic.

    http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic

    Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

    http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden (if ajax result make visible or hidden some regions of the page)

    Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.

    http://www.w3.org/TR/wai-aria/roles#alert

    Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing-impaired user. The alert role goes on the node containing the alert message. Alerts are specialized forms of the status role, which will be processed as an atomic live region.

    Other Resources

    Articles about NVDA screen reader and accessibility on ajax updates and other relevant resources:

    http://tink.co.uk/2009/06/screen-reader-support-for-ajax-live-regions/
    http://www.paciellogroup.com/blog/2008/02/ajax-and-screen-readers-content-access-issues/

    http://ejohn.org/blog/ajax-accessibility/ (here it's suggested a code snippet about a live region in which content is updated)

    <p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
    aria-describedby="users-desc" id="users">  
     ... 
 </ol>