views:

443

answers:

1

A colleague of mine came to me with a problem on one of his projects. Unable to help him, due to my lack of experience with screen readers and the technology, I turn to you, the proud and mighty mass of SO users.

Summary for the TLDR-folks: Our Grids in UpdatePanels aren't working in screen-readers. Might be something with the AJAX toolkit?

Can anyone help or provide suggestions on what steps we might be able to take next?

Here is what I received from my colleague (the emphasis is mine, not his, hoping to improve scannability):


I’m presently working on accessibility and I ran into some issues when it came to pages using Ajax. I used screen readers to test the page’s accessibility. A screen reader attempts to identify or interpret what’s being displayed on the screen with the help of audio (text-to-speech) and then transmits the information to the user. This is very helpful for people who are blind, visually impaired, illiterate or learning disabled. Here’s a brief summary of how a screen reader works. The screen reader takes a snapshot of the web page and places the content in a virtual buffer. The screen reader uses the virtual buffer to allow the user to navigate through the content. If the content is changed with scripting, then this needs to be relayed to the screen reader. Without a mechanism to discover what has changed, a screen reader user might not be notified that the content has changed at all, or only be notified that the content has been changed, but will be required to read the whole document to discover exactly what has changed. For testing, I used two types of screen readers, Access To Go 3.0.76 and Jaws 10.0.

My findings while testing were that on the pages that have a gridview within an update panel, a typical search page for example, the screen reader would read, as per usual, all the information on the page before searching (search criteria). Upon pressing the search button, our gridview containing the column headers and the result set is generated. The screen reader does not get the information that would inform it that new content has been written to the page therefore silence is heard. A technique has been recommended by a Microsoft employee that involves inserting a hidden IFrame within the update panel that would trigger the screen reader to navigate to the updated content and read it. The web site explains how to achieve accessibility only with the UpdatePanel control. I’ve tested this technique and had no success in making it work. It renders an iframe but the screen reader still doesn’t know about an update to the page.

Our AjaxControlToolKit version is 1.0.11119.0 and does not provide ARIA (Accessible Rich Internet Applications) live region markup. Live regions indicate that content changes may occur without the element having focus and provides the assistive technology information on how to process those content updates. The W3C has recommended a semantic on how to organize the content of a page, basically giving a role to every element on the page so that assistive technologies can convey the appropriate information to the user. I’m not sure what this implies in terms of where we are technologically.

+1  A: 

AJAX webpages are not a problem for screen-readers, at least for Jaws, and that is about 2 years ago (I developped some web apps with lots of AJAX which worked great with Jaws).

Anyway, you should use good screen CSS layout, and HTML anchors for better accesibility (title, alt, tabindex, label).

Anyway, if you really worry about accessibility, you should load everything through an iframe and use a callback to update the parent (a little <script> tag which updates the parent container DIV with the iframe content). Have also a look at PORK.Iframe (schizofreend.nl/Pork.Iframe).

EDIT: There's good stuff there: Sitepoint article about AJAX and screenreaders

Adrián
Thanks for the post Adrian! I'm going to pass this to my colleague and have him try this out on his project, and hopefully it resolves the issue. I'll let you know!
Jay S
It looks like the iframe and script solution did not work out in our case. The grid results in the UpdatePanel refuse to be recognized.We are working on an alternate solution of displaying our results without using an UpdatePanel. If this works, I'll post this as the answer.
Jay S