WCAG selectable column has empty table header

[Jack]

Hello,

When making a column selectable the table header fails WCAG AA 2.1 compliance as the select all header is flagged as a empty table header

[Alex Hajigeorgieva]

Hi, Jack,

You can provide a columns.headerTemplate with text for the selectable column to rectify the missing text error:

{ 
  selectable: true, 
  headerTemplate:"<input class='k-checkbox' data-role='checkbox' aria-label='Select all rows' aria-checked='false' type='checkbox'>&nbsp;&nbsp; Select column" 
},

https://dojo.telerik.com/@bubblemaster/uBekAHUR

At present, there is no built-in setting that can add a message for you. If you think the grid should expose such an option, let me know and I can transfer this post to our Feedback portal so others can upvote it.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Kulwant]

We also suffer from this issue we have table header that contain no text, in the case where have a checkbox we have limited space so cannot add text ‘select all’, so what can be done about these?
 According to the link https://docs.telerik.com/kendo-ui/accessibility/section-508-wcag, the grid control is WCAG 2.1 AAA compliance, however if you click the grid example and then run WAVE tool, there are errors, table header contains no text.

thanks

[Alex Hajigeorgieva]

Hi, Kulwant,

To achieve maximum accessibility, there are certain settings that need to be enabled for the Kendo UI Grid.

For example, the jQuery Kendo UI Grid is scrollable by default but for higher accessibility scrolling should be disabled:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/scrolling/overview#getting-started

The expand/collapse column when there are details, also has no text but you can add it by using the messages:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/messages.expandcollapsecolumnheader

The same goes for the Select All column - its width can be set so that text can be added for a truly accessible header. If you do not wish to do that, then you can still add the text and hide it off the screen as suggested in this article:

https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

Here is the updated Dojo:

http://dojo.telerik.com/evUwUzOj/2

Finally, the link in the documentation points to the index page for each widget where all of the demos are available to navigate to. Perhaps the Keyboard Navigation demo is a more suitable candidate to showcase accessibility:

https://demos.telerik.com/kendo-ui/grid/keyboard-navigation

I hope this helps. Let me know in case you have any further questions.

Regards,
Alex Hajigeorgieva
Progress Telerik