Accessibility support for Great plugin?
Accessibility support for Great plugin?
Hello Allan,
I have recently been using datatables and everything works perfectly, extremely impressed with this plugin, but I have noticed some minor accessibility issues: I did notice another post mentioning so thought I would add to this new one and show how I was able to resolve via fnInitComplete callback.
1. pagination full_page_numbers: currently these elements are spans, that only seem to respond to 'mouseClick' events rather than the usual 'click' which would work for both mouse and keyboard. I have added tabindex via attr in jQuery, which now makes elements focusable - but not clickable due to mouseClick event - which I would need to mod the datatable lib to achieve - any chance you can make a change to this even in a future release?
2. search/filter: currently this updates the table dynamically upon user input, but any user without full view of the page wouldn't see or be aware these updates are occurring, one way around this was to add ARIA support for the info field (as updates to info occur they are politely read out), so as a user searches, they are read via screenreader and 'aria-live' what the table info is currently displaying, "eg: Showing 1 to 4 of 4 records (filtered from 11 total records)". This resolves the unknown update issue with search.
[code]
'fnInitComplete': function() {
// added to allow focus for spans - natively not a focus-able element via keyboard and allows clicks
$('#table_paginate span.paginate_button, #table_paginate span.paginate_active').attr('tabindex','0').keydown(function(e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$(this).trigger('click');
}
});
// add aria-attr for accessibility
$('#data-table_info').attr({ 'aria-relevant':'additions', 'aria-atomic':'true', 'aria-live':'polite' });
}
[/code]
I hope this post will aid someone else, and hopefully help any future dev work for you. I will post any more ARIA updates I make.
Thanks again for the great plugin.
I have recently been using datatables and everything works perfectly, extremely impressed with this plugin, but I have noticed some minor accessibility issues: I did notice another post mentioning so thought I would add to this new one and show how I was able to resolve via fnInitComplete callback.
1. pagination full_page_numbers: currently these elements are spans, that only seem to respond to 'mouseClick' events rather than the usual 'click' which would work for both mouse and keyboard. I have added tabindex via attr in jQuery, which now makes elements focusable - but not clickable due to mouseClick event - which I would need to mod the datatable lib to achieve - any chance you can make a change to this even in a future release?
2. search/filter: currently this updates the table dynamically upon user input, but any user without full view of the page wouldn't see or be aware these updates are occurring, one way around this was to add ARIA support for the info field (as updates to info occur they are politely read out), so as a user searches, they are read via screenreader and 'aria-live' what the table info is currently displaying, "eg: Showing 1 to 4 of 4 records (filtered from 11 total records)". This resolves the unknown update issue with search.
[code]
'fnInitComplete': function() {
// added to allow focus for spans - natively not a focus-able element via keyboard and allows clicks
$('#table_paginate span.paginate_button, #table_paginate span.paginate_active').attr('tabindex','0').keydown(function(e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$(this).trigger('click');
}
});
// add aria-attr for accessibility
$('#data-table_info').attr({ 'aria-relevant':'additions', 'aria-atomic':'true', 'aria-live':'polite' });
}
[/code]
I hope this post will aid someone else, and hopefully help any future dev work for you. I will post any more ARIA updates I make.
Thanks again for the great plugin.
This discussion has been closed.
Replies
That's awesome - thanks for the post. I've been trying for quite a while no to find an ARIA consultant who would be interested in working on DataTables to improve the accessibility of the library. At the moment adding ARIA support would be the only reason for me creating a v1.9 release of DataTables (before moving on to v2).
I'm sure I could add the ARIA attributes to DataTables, but the trouble I have is, given I'm no expert in ARIA, I would be worried about creating accessibility problems with putting attributes in the wrong place (for example, should DataTables use the 'role="grid"' option). If you are, or know of an ARIA consultant, I'd love to hear from you: http://datatables.net/contact .
For your changed above - the fnInitComplete one is a nice touch to get that working with the current release. With the paging / click stuff - yes that most certainly requires some work, and should be addressed (that will need some ARIA support as well for the dynamic updating of the list).
Thanks,
Allan
1. paginate_full_numbers - by using the jQuery trigger event / tabindex I have been able to allow keyboard users to access the page controls. What this does is allow (un)natural focus on these elements via tabindex - it then assigns another keydown event, which if is 'space' or 'enter key' trigger a click event - which in-turn triggers your DT mousedown event.
Its kind of like a chaining of events but if added in fnInitComplete will allow keyboard users to access page controls.
[code]
$('#table_paginate span.paginate_button, #table_paginate span.paginate_active').attr('tabindex','0').keydown(function(e) {
if (e.keyCode == 13 || e.keyCode == 32) {
$(this).trigger('click');
}
});
[/code]
Note: this is a quick fix for anyone who wants default full number pagination with minor code changes. Tested FFox and IE7/8
Allan
That would be great as much as the above works functionally, the JAWS screenreader for some odd reason in FireFox reads the spans as inputs... changing the HTML to anchors works perfectly.
James.