Kendo-Grid - Accessibility test - issue with Aria role

[Kumar]

Hi Team,

We are using the Kendo grid and getting below warnings for Aria role with accessibility check. the code is simply to display the data from DB and non editable & Sortable.

Please help to resolve the below 4 warnings for single Kendo grid.

Using the Kendo grid version 18.0.0

1.

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (thead)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application:  ***************

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > .k-grid-header[role="presentation"] > .k-grid-header-wrap[data-scrollable=""][role="presentation"] > .k-grid-header-table > thead

Snippet: <thead kendogridheader="" role="rowgroup" class="k-table-thead">

How to fix: 
Fix any of the following:
  Element has children which are not allowed: [role=columnheader]

Environment: Microsoft Edge version 136.0.0.0

2

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (#k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: **********

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5

Snippet: <div role="grid" kendodragtargetcontainer="" kendodroptargetcontainer="" mode="manual" class="k-grid-aria-root" id="k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5" aria-label="Data table" aria-rowcount="2" aria-colcount="22">

How to fix: 
Fix any of the following:
  Element has children which are not allowed: [role=presentation], [role=columnheader], [role=gridcell]

Environment: Microsoft Edge version 136.0.0.0

3

Title: WCAG 2.1.1: Ensure elements that have scrollable content are accessible by keyboard (.k-grid-content.k-virtual-content)
Tags: Accessibility, WCAG 2.1.1, scrollable-region-focusable

Issue: Ensure elements that have scrollable content are accessible by keyboard (scrollable-region-focusable - https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable)

Target application: *****************

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > kendo-grid-list > .k-grid-content.k-virtual-content

Snippet: <div class="k-grid-content k-virtual-content" style="width: 1588px;">

How to fix: 
Fix any of the following:
  Element should have focusable content
  Element should be focusable

Environment: Microsoft Edge version 136.0.0.0

4

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (tbody)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: ***************

Element path: #k-8d34ce03-5f96-4632-b56a-ea5497e2d1e5 > kendo-grid-list > .k-grid-content.k-virtual-content > div[role="presentation"] > .k-grid-table > tbody

Snippet: <tbody kendogridtablebody="" role="rowgroup" class="k-table-tbody">

How to fix: 
Fix any of the following:
  Element has children which are not allowed: [role=gridcell]

Environment: Microsoft Edge version 136.0.0.0

[Martin Bechev]

Hello Kumar,

Thank you for the provided feedback.

All components of the Kendo UI for Angular suite comply with WCAG 2.2 and Section 508. More details about the level of compliance can be seen in the following table:

https://www.telerik.com/kendo-angular-ui/components/accessibility/accessibility-compliance#accessibility-support-per-component

We also invest some time in updating our Accessibility Overview article, trying to cover everything about the accessibility of the components:

https://www.telerik.com/kendo-angular-ui/components/accessibility

The Grid is a complex component that contains many HTML elements. Depending on the level of customization the generated DOM might get more complex and some accessibility tools to find issues with it. The Grid was highly tested for accessibility compliance against WCAG 2.2 specifications but different accessibility tools have different rules that they follow, which is why we cannot provide a component that complies with all of them. We heavily tested and complied with axeDevTools and Ocean Blue Accessibility Swatch. I checked the Grid with a couple of scenarios and no aria warnings were thrown.

https://www.telerik.com/kendo-angular-ui/components/grid/accessibility

All known accessibility issues with Kendo components can be found here:

https://github.com/telerik/kendo-angular/issues?q=is%3Aissue%20state%3Aopen%20label%3AA11Y

The accessibility issue observed—“Ensure elements that have scrollable content are accessible by keyboard”—has been previously reviewed by our development team. After thorough evaluation, it was determined that due to the way the Grid is rendered, it is not currently possible to prevent this specific Axe accessibility warning.

To address the issue and improve keyboard accessibility, we recommend enabling the Grid's built-in keyboard navigation by setting its navigable property to true. This allows users to interact with and scroll through the Grid content using keyboard arrow keys, thereby aligning the behavior more closely with accessibility best practices.

https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation

Regards,

Martin Bechev
Progress Telerik