WCAG selectable column has empty table header

4 posts, 0 answers
  1. Jack
    Jack  avatar
    2 posts
    Member since:
    Jan 2020

    Posted 11 Dec 2020 Link to this post

    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

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 15 Dec 2020 Link to this post

    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/.

  3. Kulwant
    Kulwant avatar
    1 posts
    Member since:
    Jan 2020

    Posted 15 Dec 2020 in reply to Alex Hajigeorgieva Link to this post

    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

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 16 Dec 2020 Link to this post

    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/.

Back to Top