Screen reader not reading number of rows in grid for Telerik RadGrid.

[Nagendra]

Hi All

 

This is regarding Telerik Radgrid usage present in below link.

https://demos.telerik.com/aspnet-ajax/grid/examples/accessibility-and-internationalization/accessibility-compliance/defaultcs.aspx

The example claims that they are "WCAG 2.0 Compliant"

But, When i am trying to use Screen Reader (JAWS), and navigate to the table in above link,the JAWS is not reading the number of rows present in the grid correctly.

It is treating Header as separate table and details as separate table.

When you press 'T' with JAWS on, JAWS reads "Grid with 6 Columns and 1 Row"
and when you press 'T' again , JAWS reads "Grid with 6 Columns and 20 Rows".

Telerik team is claiming that they are "WCAG 2.0 and Section 508 compliant" in above example, but it is not reading the number of rows correctly which i feel is an issue?

Ideally it should treat both header and details as part of single table for screen reader to read it correctly. Is there any plan to fix this issue?

[Attila Antal]

Hi Nagendra,

For your convenience I am also sharing the answer in the forum thread you have opened for this issue.

RadGrid was designed to render separate tables for the Header and Data, and if pressing the T key while JAWS is running, this button instructs the JAWS to jump to the next available table in the page and describe it. 

Because JAWS reads out loud the underlying table elements, we cannot consider this as an issue. What we can do, is to suggest your idea as an enhancement for the Grid. For that reason, I have created a Feedback item on your behalf and can be accessed in our Feedback Portal at: JAWS reads Grid header as separate table when pressing the T key while grid has Static Headers enabled. Please open the item and click on Follow to get notified about the upcoming changes.

Perhaps you would be interested in using a workaround which will hide the header's Table from JAWS, but will update the Summary of the Data Table mentioning the columns names.

<script type="text/javascript">
    function OnGridCreated(sender, args) {
        // hide the Header Table from JAWS
        $(sender.get_element()).find('.rgHeaderWrapper .rgHeaderDiv table').attr("aria-hidden", true);
        // update the current summary of that Table containing the Data with additional information.
        var tableData = $(sender.get_element()).find('.rgDataDiv table.rgMasterTable');
        var tableSummary = tableData.attr("summary");
        // get reference to the columns collection
        var gridColumns = sender.get_masterTableView().get_columns();
        // count the columns
        var columnsCount = gridColumns.length;
        // define a new variable for the new message
        var newInfo = "Column names are";
        // loop through each column to be able to get their name
        for (var i = 0; i < columnsCount; i++) {
            var column = gridColumns[i];
            // append the column name to the new message
            newInfo += ", " + column.get_uniqueName();
        }
        // replace the old Summary with the new Summary including the old+new message
        tableData.attr("summary", tableSummary + " " + newInfo);
    }
</script>

Here is a screenshot of the resulted HTML: 



Another approach for a workaround might be to keep the Header table visible for JAWS, and update it's summary attribute saying that this is the header of the grid.


Kind Regards,
Attila Antal
Progress Telerik