I created a forum post and it was suggested that I create a feature request for improved Kendo Grid keyboard accessibility when the grid contains locked columns and/or clickable elements such as buttons, links, and input boxes. I noted the following issues that I feel should be supported without having to write a bunch of workarounds or create a poor user experience for regular (mouse and keyboard) users.
This is an urgent concern because many of our clients are requiring our site to meet accessibility standards and with the heavy use of Kendo grids in their current state, it does not seem to.
I have a grid with 2 locked columns with a button in the first column and a hyperlink in the second column, the other columns just have text. I set navigatable to true. None of my fields are editable.
Here is a dojo: https://dojo.telerik.com/KUcMekCh
When the user tabs to the grid, they first get the search bar in my custom grid toolbar. Next they tab to the button (which happens to be a bootstrap dropdown menu but I don't think that is relevant). Here is where the issues start:
- They then hit tab again and sometimes are taken to the hyberlink while other times they are taken to the next row, skipping column 2's hyperlink.
- The grid does not always enter Kendo's navigation mode. When it doesn't, there is no way for the user to interact with the column header which has the sort and tooltip buttons in it.
- When they get to the bottom of the grid, the locked side will scroll vertically but the unlocked side remains in place, causing the rows to be misaligned.
- When an input cell is in the unlocked portion of the table, the user has to tab through the entire list before getting back to editing the input for a row. This isn't logical.
- I worry that if there were editable cells, which some of my grids have, the user won't be able to tab to the next editable cell and instead will be forced to navigate through every cell. I don't want to make it more difficult for a normal user in order to accommodate a keyboard only user so there needs to be a way for both to work well.
- Often the focus ends up on the unlocked table which attempts to put a blue outline around that, however, the outline isn't fully visible since that is inside of a scrollable div.
- You can click into a cell with navigatable set to true and then use the navigation but that doesn't work for a keyboard only user.
- When navigatable is not turned on, the user cannot scroll vertically if they tab to the table.