Telerik Forums
Kendo UI for jQuery Forum
1 answer
177 views

Hello all,

I'm working on accessibility features for one of our kendo grids, and our version of kendo ui is v2012.2.710. This one has both sortable and scrollable set to true. One problem is that if scrollable is set to true the headers and body are broken up into two separate tables, and so the headings to not get read when using screen reader navigation (which is using ctrl and the arrow keys to navigate within the table). The screen reader also correctly reads there are two tables and thus you can't navigate easily from the headings to the body using screen reader controls. The other problem being that setting sortable to true makes it so the headings are read off as links.

For the scrollable problem, I've simply set scrollable to false for now, but is there a way to keep this functionality and have the table not be broken up? Or to add some sort of setting to trick the screen reader into thinking it's all one table? I've read about adding scope="col" as an attribute to the headings but that doesn't seem to address the problem.

For sorting, I'm having a lot more difficulty. I've tried using aria-labels but I can't seem to get a consistent fix working for it. When trying to relabel the headings it seems to break the heading association that setting scrollable to false fixes, I'll get a generic "Column 1" read back to me instead of the heading name. I'm also getting mixed results when dealing with the two different screen readers (NVDA and Narrator) that we test against.

Thus far I've had the best luck setting both scrollable and sortable to false and making sure every column has fields and titles set for it. Just wondering if there's an official answer on this or if someone's been through this. I know we've got a pretty old version of kendo to work with and if you know of an update that addresses this, that's helpful as well.

Thanks!

Georgi
Telerik team
 answered on 04 May 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?