Menu
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>
792
html() will completely replace the content inside the tag that the selector corresponds to. $('#'). append() will just append to the end of the content inside the tag.
jQuery append() Method The append() method inserts specified content at the end of the selected elements. Tip: To insert content at the beginning of the selected elements, use the prepend() method.
HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters: The position (in the document) where you want to insert the code ('afterbegin', 'beforebegin', 'afterend', 'beforeend')
First, select the div element which need to be copy into another div element. Select the target element where div element is copied. Use the append() method to copy the element as its child.
ARIA in HTML — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required. What is accessibility?
The label text contained in the aria-label attribute is read out when the form input is highlighted. Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose.
aria-selected — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript. aria-hidden — Hides an element from being read out by a screenreader.
Practical WAI-ARIA implementations 1 Signposts/Landmarks. WAI-ARIA adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. 2 Dynamic content updates. ... 3 Enhancing keyboard accessibility. ... 4 Accessibility of non-semantic controls. ...
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
