Hello!
My teammates and I have noticed during accessibility testing, that the Kendo React Grid component seems to be rendering two distinct <table> components in the DOM. The first table contains the thead element, along with column headers and filter cells, while the second table contains the tbody element and all of the table data. Because of this behavior, our accessibility testing tool is unable to establish the association between a given <td> element and its respective <th> element. This can reportedly cause problems for screen readers as the user navigates through a table with keyboard controls, changing the <td> element that has focus.
We have been unable to test with actual screen reader assistive technologies, so I cannot confirm that this breaks WCAG compliance, but I'm wondering if any developers could confirm that this is expected behavior, and that screen readers are able to establish the meaningful connection between a <td> and <th> even though they exist in different <table> elements.
My teammates and I have noticed during accessibility testing, that the Kendo React Grid component seems to be rendering two distinct <table> components in the DOM. The first table contains the thead element, along with column headers and filter cells, while the second table contains the tbody element and all of the table data. Because of this behavior, our accessibility testing tool is unable to establish the association between a given <td> element and its respective <th> element. This can reportedly cause problems for screen readers as the user navigates through a table with keyboard controls, changing the <td> element that has focus.
We have been unable to test with actual screen reader assistive technologies, so I cannot confirm that this breaks WCAG compliance, but I'm wondering if any developers could confirm that this is expected behavior, and that screen readers are able to establish the meaningful connection between a <td> and <th> even though they exist in different <table> elements.
1 Answer, 1 is accepted
0
Hello Noah,
Thank you for reaching out to us.
The KendoReact Grid will indeed render two separate TABLE elements for the header and the data, but the attributes to the TD elements are sufficient for the screen readers to match the column name with the selected cells within the data TABLE. You can test this with NVDA for example and the following demo:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!