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

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

SCR21: «Using functions of the Document Object Model (DOM) to add content to a page» (see http://www.w3.org/TR/WCAG20-TECHS/SCR21.html)
SCR-26: «Inserting dynamic content into the Document Object Model immediately following its trigger element» (see http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html#SCR26)
G75: «Providing a mechanism to postpone any updating of content» (see http://www.w3.org/TR/WCAG20-TECHS/G75.html)
G76: «Providing a mechanism to request an update of the content instead of updating automatically» (see http://www.w3.org/TR/WCAG20-TECHS/G76.html)
G186: «Using a control in the Web page that stops moving, blinking, or auto-updating content» (see http://www.w3.org/TR/WCAG20-TECHS/G186.html)

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>