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

StackOverflow https://stackoverflow.com/questions/9827449

Frage

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>
War es hilfreich?

Lösung

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>

Andere Tipps

Here's a working example of a chat using ARIA and explanations. Both pages are in french (though the former should translate well with Google Translate and the latter is well translated, I just verified); the script and the resources are all in english ;)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top