Geek Answers Handbook

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

I can't seem to find any resources or code examples with which I can get screen readers to work (using wai aria) with jquery when pasting html into dom or adding html to dom.

Can someone point me to some useful resources that I can use as a guide, or provide some code examples that I can use to develop my application to meet accessibility standards with dynamic content being added to my page back?

TIA.

Edit (added code that cannot be 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>
+8
jquery ajax accessibility wai-aria wai
source share
2 answers

WCAG

These are WCAG recommendations for client scenarios related to content updates: http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

In particular, so far I have found

ARIA

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

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

Indicates that the item will be updated and will describe the types of updates that user agents, assistive technologies, and the user can expect from a live area.

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

Indicates which notifications about changes in the user agent (additions, deletions, etc.) will be received by assistive technologies in the real region. See Corresponding atomic aria.

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

Indicates whether assistive technologies will represent all or only parts of the changed region based on change notifications identified by the attribute corresponding to the aria.

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

Indicates that the element and all its descendants are not visible and are not perceived by any user implemented by the author. See Related Arias-Disabled.

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

Alerts are used to send messages to alert the user. In the case of sound alerts, this is an affordable alternative for the hearing impaired user. The warning role appears in the node containing the warning message. Alerts are specialized forms of the status role that will be treated as an atomic living area.

Other resources

Articles about the NVDA screen reader and availability on ajax updates and other related 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 he suggested a code snippet about the living area in which the content is being 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>
+6
source share

Here is a working chat example using ARIA and an explanation . Both pages are in French (although the former should translate well with Google Translate, and the latter translate well, I just checked); script and all resources in English;)

0
source share

More articles:


All Articles