Search code examples
jqueryhtmlajaxaccessibilitysection508

Accessible, 508 compliant Ajax Pagination

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>
Solution

  • 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.