Achieving ADA compliant kendo grid

[Sandeep]

Hello,


We’re using the Kendo Grid and eed to  make this as ADA compliant as possible.
We're using a tool called JAWS for verifying the ADA compliance.
Need to achieve the following in Kendo Grid: 

1. When the grid is in focus should read out the headers to me. I think the entire header row should be in focus for this. If I press tab again it should take me to the next control on the page.

2. When the grid is in focus (when I tab onto the grid) I need to be able to navigate through each record in the grid using keyboard up down arrow keys.

3. As a continuation to #2, when navigate through each record using up-down arrows, I need the entire row to be selected instead of a single cell. This would make sure JAWS reads the entire row's content instead of the single cell content.

We have used around 120+ grids in our application.
Kindly let us know 
- how to achieve the above using minimum code changes and
- if we can apply the changes in a common place.

Thanks.

[Nikolay Rusev]

Hello Sandeep,

Most of the desired functionality can be achieved by enabling keyboard navigation feature of the grid. This will also enable the WAI-ARIA support.

`1. When the grid is in focus should read out the headers to me. I think the entire header row should be in focus for this. If I press tab again it should take me to the next control on the page.`

Generally speaking - there are two types of rendering of the widget:
 - scrollable: true /this is the default one/- in this case the header cells are rendered in separate table from the data cells
 - scrollable: false - one table for both header and data cells

In the first scenario when the user points to the header table it will become focused and then can use the arrow keys to move between both tables.

`2. When the grid is in focus (when I tab onto the grid) I need to be able to navigate through each record in the grid using keyboard up down arrow keys. `

You will need to set navigatable: true in order to be able to move around the grid cells with the keyboard. 

`3. As a continuation to #2, when navigate through each record using up-down arrows, I need the entire row to be selected instead of a single cell. This would make sure JAWS reads the entire row's content instead of the single cell content.`
 
This is not supported. When the keyboard navigation is enabled the user is allowed to move one cell at a time. Alongside the change of the currently highlighted cell various ARIA attributes also change, like aria-selected. This should be indicated by the assistive tool.

The following demo illustrates the keyboard navigation & accessibility capabilities of the grid: Grid / Keyboard navigation.

The following articles explains in details what Kendo UI widgets implement as WAI-ARIA support:
 - Kendo UI Accessibility Overview
 - WAI-ARIA Support in Kendo UI Web
 - Keyboard Support in Kendo UI Web

Regards,
Nikolay Rusev
Telerik

 

 

[Sandeep]

Hello Nikolay,

Thanks for the reply.
Now we have another issue, when I click on a header column cell of the Kendo Grid, JAWS reads the previous column's header content.
Say for example I have 4 columns with following headers => Name, Date Of Birth, Address 1, Address 2.
When I click on header 'Address 1' - JAWS reads Date Of Birth, when I click Address 2 - JAWS reads Address 1.
Checked the kendo grid demo site and found that it reads the headers correctly.
We have created a demo project that uses the grid exactly like we do in our mvc project. Unable to attach it here, let me know where to upload it.
Please take a look and let us know what we're missing and how to fix this issue.

Thanks.

[Nikolay Rusev]

Hello Sandeep,

You can open a support ticket where you will be able to attach files or create try kendoui/jsbin example.

Regards,
Nikolay Rusev
Telerik