Under Review
Last Updated: 26 Feb 2022 18:21 by ADMIN
Alex
Created on: 25 Feb 2022 14:10
Type: Feature Request
0
Kendo React Grid is not accessible when trying to navigate it as a table using the Government ANDI tool

Hello, 

I'm trying to implement an accessible table using your Grid React component. The idea is for the users to be able to navigate the table using the keyboard if need be. Because we are a government contractor we have to make our product accessible and, testable using the Government issued tool for testing, ANDI

When I use a normal table, I can implement scopes in the table header, either for the column or the row and thus create relationships between headers and cells as well as, use the keyboard to navigate the entire table.

When the same table is implemented with the Grid component, there are no scopes in the header then again, both header and body are separate even though they reside inside a div with role=grid on it which in turn, contains two divs, one for the header and one for the body each in turn, implementing a table: one for what would be the headers and one for what would be the body. I'm attaching screenshots even though I'm sure you know the product.

The fact that both the <thead> and the <tbody> reside in different places, even though they are within the grid, makes it impossible to add associations furthermore, we're using a data-table and the grid. I tried using different props but, as long as both the header and the body are separate, the ANDI tools can't find the table.

Question is, is there a way to make this table truly accessible just as a one created using the semantic table tags?

1 comment
ADMIN
Konstantin Dikov
Posted on: 26 Feb 2022 18:21

Hi Alex,

Thank you for contacting us.

I have went through the documentation of ANDI and I have noticed that they have very specific instructions for the Table elements. I have converted the item from a "Bug report" to a "Feature request", because the attributes required by ANDI are not common for accessibility:

As for the navigation, we do have keyboard navigation functionality that allows the user to move across cells with the keyboard:

Additionally, we do provide custom headerCell and custom cell options for each column, where you can define custom attributes to the cells. Another option is to handle the "cellRender" and add the attributes conditionally:

Notwithstanding, we will follow the interest in the feature request and if it receives enough votes, we will consider including an option for adding the specific attributes. 

 

Best Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.