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>

回答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.

回答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.

来源：https://stackoverflow.com/questions/4228674/accessible-508-compliant-ajax-pagination