JAW is not reading dataTable

sheredia

I am having issues with my datatables and JAW. JAW reads it as not in a table.
The data for the table is fed via ajax.
I have columnDefs to add wai-aria tags.
I am using jquery.dataTables.min.js version DataTables 1.10.10 and using jquery-1.12.0.min.js
The only JAW table command that works is ctrl alt 5 and it reads the column and row but other commands are read as not in a table.

allan

Do you mean the screenreader JAWS? If not that, then I'm not sure what "JAW" is?

sheredia

Yes, I mean JAWS the screen reader

allan

Okay thanks. I'll try to take a look into this in the next few weeks. I didn't have a problem with JAWS last time I used it, but that was about a year ago.

Allan

sheredia

Thanks Allan, I will truly appreciate your help

Inamseng

Hello Guys!

I am using JQUERY datatable, everything works fine but there is one major issue that I am facing using JAWS screen reader is, it is not able to read the header of the table, Instead it announces the number of column it is reading.

here is how my table is built with jquery

$('#table').dataTable({
bJQueryUI: true,
sPaginationType: "full_numbers",
"bAutoWidth": true,
"sScrollX": true,
"scrollY": 325,
"bPaginate": true,
"bScrollCollapse": false,
"iDisplayLength": 25
});

Any Ideas?

allan

Scrolling causes the table to be broken up in to a header and body (and footer if present). As such scrolling really isn't at all suitable for cases where you need the table to be accessible for JAWS etc.

Allan

sheredia

Allan,

This is the configuration of one of my tables:

    var rowID;      
    $('#qmat_uploaded_files_table').DataTable({
        "destroy": true,
        "serverSide": true,
        "searching": false,
        "ajax": "./data/listOfUploadedFiles.json",
        "columnDefs": [
            {
                "targets": [0],
                "cellType": "th",
                "fnCreatedCell": function ( cell ) {
                    cell.scope = 'row';
                    cell.id = cell.innerHTML;
                    cell.setAttribute('aria-label', 'Import ID ' + cell.innerHTML);
                    cell.setAttribute('tabindex', 0);
                    rowID = cell.id;
                }
            },
            {
                "targets": [1],
                "fnCreatedCell": function ( cell ) {                            
                    cell.setAttribute('aria-label', 'File name for Import ID ' + rowID + ' is ' + cell.innerHTML);
                    cell.setAttribute('tabindex', 0);
                }
            },
            {
                "targets": [2],
                "fnCreatedCell": function ( cell ) {                            
                    cell.setAttribute('aria-label', 'File type for Import ID ' + rowID + ' is ' + cell.innerHTML);
                    cell.setAttribute('tabindex', 0);
                }
            },
            {
                "targets": [3],
                "fnCreatedCell": function ( cell ) {                            
                    cell.setAttribute('aria-label', 'File status for Import ID ' + rowID + ' is ' + cell.innerHTML);
                    cell.setAttribute('tabindex', 0);
                }
            },
            {
                "targets": [4],
                "fnCreatedCell": function ( cell ) {                            
                    cell.setAttribute('aria-label', 'Date received for Import ID ' + rowID + ' is ' + cell.innerHTML);
                    cell.setAttribute('tabindex', 0);
                }
            },
            {
                "targets": [5],
                "fnCreatedCell": function ( cell ) {                            
                    cell.setAttribute('aria-label', 'Date processed for Import ID ' + rowID + ' is ' + cell.innerHTML);
                    cell.setAttribute('tabindex', 0);
                }
            }
        ],                 
        "columns": [
            { "data": "importId" },
            { "data": "fileName" },
            { "data": "fileType" },
            { "data": "fileStatus" },
            { "data": "dateReceived" },
            { "data": "dateProcessed" }
        ],
        "language": {
            "processing": "Processing data...",
            "sEmptyTable": function(){
                $(this).text('No data available in table');
                $(this).attr('tabindex','0').attr('aria-label', $(this).text());
            }
        }           
    }); //Ends Uploaded Files

allan

Thank you. I've not had a chance to look into this yet.

Allan