Datatables 1.9 508 compliance questions

RaviKul

Im a newbie on datatables and currently we are using 1.9.4 version. We are facing some serious 508 issues on DT and need to addressed immediately. Any help and guidance on resolving them is greatly appreciated. Below are what we are trying to fix on DT

1. Sortable elements does not show outline when tabbed.
2. Sortable elements should be able to be read by screen readers like JAWS
3. When changing the sort order, sorting order should be screen readble
4. Pagination links cannot be tabbed and should be screen readble

I know this is a lot to ask but appreciate any help or guidance on how to resolve the above issues. What are the must-haves on DT to ensure above 508 behavior ??

To give you a context of my application, the DT is loaded as part of search result after submitting few criteria on the same search page displaying the submitted criteria along with the serach result returned back.

Any code samples will be greatly appreciated.

Thanks,
Ravi

RaviKul

As I was reading through the forum, I came across that as such any sortable can take focus and can be tabbed with an outline. In my case I have the tabindex on (Except the first column all other are sortable) but I dont see the outline when tabbing on column header. Is this something to do with the datatable initialization/configuration. Please advise.

Thanks,
Ravi

RaviKul

Please find below the support request code from table data upload on debugger

aqonof

Hoping for quick help.

Thanks,
Ravi

allan

This should all be working:

> 1. Sortable elements does not show outline when tabbed.

Appears to work for me no problem here: http://datatables.net/release-datatables/examples/basic_init/zero_config.html

> 2. Sortable elements should be able to be read by screen readers like JAWS

They are - they have aria-label attributes.

> 3. When changing the sort order, sorting order should be screen readable

It is - the aria-label attributes no the TH element indicate which column is sorting.

> 4. Pagination links cannot be tabbed and should be screen readble

Like point 1, it appears to work okay for me.

Possibly not a massively helpful reply, but I need to see a page where these things are not working to be able to offer any help.

Allan

RaviKul

Allan,
Thanks for promptly replying back. I believe all the issues reported above should be working with 1.9 but the code I inherited with limited datatable experience doesnt seem to exhibit those features. I uploaded the code via debugger. Here's the request code # aqonof I got back. Please let me know if this is helpful. I will certainly tak a look at the link you posted on your reply.

Thanks,
Ravi

allan

Hi Ravi,

The debugger says you are using 1.9.4, so it shouldn't be that. Is there something suppressing the outline in your CSS somewhere ( `outline: none` ) perhaps?

Allan

RaviKul

Hi Allan,
Here's what I have on the CSS

table.dataTable thead th:active,
table.dataTable thead td:active {
outline: none;
}

I tried with outline: dotted but that didnt seem to work. Any suggestions please.

By the way, the tabbing on column header works after I commented iTabindex: 1 in the table initialization default code but the focus shifts back to first column all over again after tabbing through all the columns(tabbing iterates twice on column headers). Below is the code(please bear with me)

[code]
$.extend(true, $.fn.dataTable.defaults, {
"bPaginate": true, //enable pagination
"aaSorting": [[1, 'asc']], //initial sort
"sPaginationType": "full_numbers //pagination type
"sDom": '<"clear"><"top"lf>rt<"bottom "ip><"clear">T', //table features positioning
"aoColumnDefs": [
{
"bSortable": false, "aTargets":[0],//disable sorting on the first col
"aTargets": [0],//create rows with scope row
"sCellType": "th",
"fnCreatedCell": function ( cell ) {
cell.scope = 'row';
}
}
],
"bStateSave": false , //enable table state saving
"fnInitComplete": function(oSettings, json) {//callback when teh datatable has been initialized
},
"bProcessing": true, //processing screen when table is loading
"iTabIndex": 1, //tabindex -- after commenting this line, tabbing flows naturally
"bAutoWidth": true, //auto width
"sScrollX": "100%", //used to do the x scrolling
"sScrollY": 600,//used to do the y scrolling
"bScrollCollapse": true,//collapse table when results are fewer than the size
"oLanguage": {//rename features
"sSearch": "Find:",//Rename the Search box to find
"sInfo": "Records _START_ - _END_ of _TOTAL_ "+ str+"",//Format table info
"sLengthMenu": "Records per page _MENU_ ",//Rename the show x records dropdown
"oPaginate"://rename pagination buttons
{
"sFirst": "|<",
"sLast": ">|",
"sNext": ">",
"sPrevious": "<"
}
}
} );
[/code]


Below is how the table is being initialized

[code]
var oTable1 =$('#enrollmentSearchResults').dataTable({
"iTabIndex": 0,
"aoColumns": [{ "sWidth": "19em" },
{ "sWidth": "10em" }, { "sWidth": "15em" }, { "sWidth": "10em" }, { "sWidth": "10em" }, { "sWidth": "15em" }, { "sWidth": "10em" }, { "sWidth": "10em" }, null,
{ "sWidth": "20em" }, null,
{ "sWidth": "15em" }, null,
null], "oTableTools": {"aButtons": [
{
"sExtends": "xls", "sButtonText": "Export to CSV",
"sTitle": fileName,
"mColumns":[1,2,3,4,5,6,7,8,9,10,11,12,13]
} ,
{
"sExtends": "print", "sButtonText": "Show/Hide Print View",
"sMessage": "Print View. Please use your browser's print function to print this table. Press escape when finished.",
"fnClick": function (nButton, oConfig, oFlash) {
formatPrintView();
$('#enrollmentSearchResults').dataTable().fnSetColumnVis(0, false);
$('#enrollmentSearchResults').dataTable().bSort= false;
this.fnPrint( true, oConfig );
$(document).keyup(function(e) {
if(e.keyCode == 27){
$('#enrollmentSearchResults').dataTable().fnSetColumnVis(0, true);
$('#enrollmentSearchResults').dataTable().bSort= true;
unformatPrintView();
controlFocus();
}
});
$(window).keyup(function(){
$('#enrollmentSearchResults').dataTable().fnSetColumnVis(0, true);
$('#enrollmentSearchResults').dataTable().bSort= true;
unformatPrintView();
controlFocus();
});
}
}
]},
"fnInitComplete": function () {
$("#mainResultsContainer").show();
$("#mainResultsContainer").focus(); $("#processingDiv").css("display","none").css("visibility","hidden");
}
});
[/code]

I been breaking my head over this past 3 days on why the 508 features are not functioning as expected. Hope your expertise will help me resolve the issues.

Thanks for continued support.

Ravi

allan

I'd suggest removing the `outline` none statement. That's bad for accessibility as you are seeing.

Regarding the iTabIndex - I don't know why it was set to 1 in the code above, but yes, removing it will let the tab index flow naturally since 0 is the default and that is the document tab flow.

Allan

RaviKul

I did remove the [code] outline [/code] statement but still doesnt see the outline on focused tab. Any recommendations ?

Tabbing works as expected after the changes.

Thanks,
Ravi

allan

Not without being able to see the page I'm afraid. Can you link to a test case showing the problem please.

Allan

RaviKul

Allan,
I could fix most of the issues but pagination is still pending. We are using full_number style pagination. I wonder if the pagination in itself is 508 compliant. Im trying to rename pagination links so that they have custom name when JAWS reads it. Can you please let me know where and how to do it.

allan

What do you name by rename them? Adding a name property or something else?

Allan

RaviKul

I mean have meaningful title attribute on each link like Next Page, First Page, Page 1(For link 1) etc.,

Ravi

allan

Doesn't Jaws read the link tag content? It should speak out "Next" - at least it has in my experience.

Allan

RaviKul

It's not. Currently this is what we have on default table settings

[code]
"oPaginate": //rename pagination buttons
{
"sFirst": "|<",
"sLast": ">|",
"sNext": ">",
"sPrevious": "<"
}
[/code]

On the DT, the links show up as |<, >| so forth as content but title. The reader indeed read them as 'vertical bar less than arrow' for |<. What Im trying to do is add title attribute to element which reader can announce accordingly. Please help me what code needs to be added and where.

Thanks,
Ravi

allan

Oh I see. Your code is actively removing the language that the screen reader would read and replacing it with something else. I didn't know that, but fair enough.

It sounds like a trade off to me - you can either keep the default, accessible, option, or replace it with the less accessible code. Another option is to write a paging plug-in which adds a title attribute to the link tags: http://datatables.net/development/pagination .

Allan