This is a migrated thread and some comments may be shown as answers.

WCAG selectable column has empty table header

3 Answers 90 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 11 Dec 2020, 01:06 PM

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

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 15 Dec 2020, 08:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Kulwant
Top achievements
Rank 1
Iron
answered on 15 Dec 2020, 12:34 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 16 Dec 2020, 02:48 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Jack
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Kulwant
Top achievements
Rank 1
Iron
Share this question
or