wai aria and jquery.html() and jquery.append()

Question

I can't seem to find any resources or code examples of a way that I can make screen readers work (using wai aria) with jquery on the insertion of html to the dom or the appending of html to the dom.

Can anyone please point me to some useful resources that I can use as a guideline, or provide some code samples that I can use to develop my application to meet accessibility standards with dynamic content being added to my page on an ajax post-back?

TIA.

Edit (added 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>

I've tried the code samples you provided from the link here and with NVDA, it doesn't read the content that is added. I tried it with an innerHTML, a jquery.html(), and a document.createTextNode(). Nothing...tried it with IE and chrome. Do you have a working sample? Do I need to include a JS file or a CSS file or something to make thsi work? — Christopher Johnson

Fabrizio Calderan Fabrizio Calderan · Accepted Answer · 2012-03-22T17:49:49

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>

wai aria and jquery.html() and jquery.append()

2 Answers