Enabling Tabbed Focus on Column Headers in Kendo UI Grid

Environment

Product	Kendo UI for jQuery Grid /
Version	2024.1.319

Description

I'm having trouble getting tabbed focus on column headers in the Kendo UI Grid. I need to enable keyboard access to the filtering and sorting features to be WCAG compliant. The focus is directed to data cells and skips the headers.

Solution

To ensure that the Kendo UI Grid headers are accessible via keyboard navigation and comply with WCAG standards, follow these steps:

1. Enable the navigatable option in the Grid to activate keyboard navigation.

   $("#grid").kendoGrid({
      navigatable: true,
      // other grid configurations
   });
   

2. Use the Grid's current method to set the initial focus on the first header cell when the Grid is focused.

   var grid = $("#grid").data("kendoGrid");
   grid.table.on("focus", function(e) {            
      grid.current($("th:first"));
   });
   

   Below is a runnable example:

<input type="text" />
    <div id="grid"></div>
    <script>
      $(document).ready(function () {
        $("#grid").kendoGrid({
          selectable: true,
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 20
          },
          navigatable: true,
          scrollable: true,
          sortable: true,
          filterable: true,
          pageable: {
            input: true,
            numeric: false
          },
          columns: [{                    
            field: "ContactName",
            title: "Contact Name",
            width: 240
          }, {
            field: "ContactTitle",
            title: "Contact Title"
          }, {
            field: "CompanyName",
            title: "Company Name"
          }, {
            field: "Country",
            width: 150
          }]
        });         


        var grid = $("#grid").data("kendoGrid");
        grid.table.on("focus",function(e){            
          grid.current($("th:first"))
        });

      });
    </script>

Notes

• It is important to ensure that the navigatable option is enabled for keyboard navigation to work as expected.

See Also

• Kendo UI Grid Documentation
• Keyboard Navigation in Kendo UI Grid
• Kendo UI Grid Accessibility Guide