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

2 posts, 0 answers
  1. Nagendra
    Nagendra avatar
    1 posts
    Member since:
    Apr 2019

    Posted 16 Apr 2019 Link to this post

    Hi All


    This is regarding Telerik Radgrid usage present in below link.

    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?

  2. Attila Antal
    Attila Antal avatar
    570 posts

    Posted 26 Apr 2019 Link to this post

    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);

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top