Accessible, 508 compliant Ajax Pagination

Question

I am trying to make my Ajax-enabled table pagination 508-compliant (accessible using JAWS version 9). I have a table header cell with a link which executes a jQuery ajax request onclick with a callback to update the table. I've had success using a "spacer" image inside the link body with alt text conveying sort information to JAWS users (note: tooltips are not read by default by JAWS) but which is not seen by sighted users. However, when a JAWS user navigates to the link (using the up and down arrow keys) and presses SPACE to initial the link onclick event, I have two problems:

1. no information is conveyed to the JAWS user indicating that the table content has been updated,
2. when the content is updated, the link the JAWS user just executed gets re-read, but it re-reads the alt text from before the table was updated, the user has to advance to the next field and then return back to the link for JAWS to read the updated alt text.

Tips from anyone with experience implementing accessible Ajax pagination would be much appreciated! My table header cell code follows:

<th title="Sorted column, toggle sort from Ascending to Descending" controller="xxxManagement" id="xxxName" scope="col" class="sortable sorted asc" >
    <a href="/app/xxxManagement/listXXX?max=20&sort=name&order=desc" onclick="toggleLoadingAnimation();jQuery.ajax({type:'POST',data:{'controller': 'xxxManagement','max': '20','sort': 'name','order': 'desc'}, url:'/app/xxxManagement/listXXX',success:function(data,textStatus){jQuery('#xxxList').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){},complete:function(XMLHttpRequest,textStatus){toggleLoadingAnimation()}});return false;" title="Sorted column, toggle sort from Ascending to Descending">
        Name
        <img src='/app/images/pixel.gif' alt='Sorted column, toggle sort from Ascending to Descending' />
    </a>
</th>

Uprise

Answer 1

Unfortunately I think the short answer is you’re out of luck. I frequently have issues with Jaws telling me when content is updated, and sometimes it takes a screen refresh to update the virtual buffer of Jaws. Jaws 9 is also a somewhat out of date version but you may have to deal with it if you’re writing internal apps for a department that has standardized on that version. I would suggest two things. Option one is to download jaws version 12 which has been released in the last month. If that fixes your problem maybe you could justify an upgrade? Option two is to look into WAI-ARIA This should let you mark your tables as live regions and have updates automatically announced. I don't have any experience with this but it may work. I don't know how well Jaws 9 supports WAI-ARIA but jaws 10 appears to do a fairly good job. see this blog entry for a comparison of screen reader support for WAI-ARIA. You could always do the listed tests with Jaws 9 to get an idea of what WAI-ARIA support is like.

Repercussion

thanks again for sharing with me. Working with Jaws is new for me so I never know whether I am running into a limitation of JAWS or lack the know-how to implement certain ideal accessibility features. I will download Jaws 12 and test as you suggested (Jaws 9 is indeed our customer version). FYI - Jaws 9 does not support WAI-ARIA. – Uprise

Answer 2

This might not address your specific question, but if you implement with progressive enhancement, I think it would solve the problem. In other words, have your page navigation work via traditional (non-ajax) links, then wire up ajax click events on those links.

If using a non-JS browser or screen reader, it'll simply navigate to the next page. If using a regular modern browser, it'll give the ajax experience. Accessibility is built in w/o losing the ajax experience.

Guilty

Hi Matt, thanks for taking the time to share your tips. We are in User Acceptance Testing phase now, and our implementation was driven by customer requirements (must support IE7 and IE8, must be 508-compliant, and... must be a super awesome ajax application!), so it's too late to consider Progressive Enhancement (I did read the link though, and while interesting, I think in practice would be too expensive to implement if non-js functionality wasn't called out in the requirements... js / ajax is not necessarily non-accessible, but it doesn't make things more difficult). – Uprise