AXE Error-- in JQUERY

Question

we are trying to clear the Axe errors but did not get solutions for the below error.

Can any one help me on this.

"Non-empty <td> elements in larger <table> must have an associated table header"

Note: some pages using kendo grids where the grid columns will get generate dynamically in that case how to fix this error.

Jayraj Chhaya · Answer

The error message "Non-empty elements in larger must have an associated table header" typically occurs when there are table cells ( ) without corresponding table headers ( ) in a larger table structure. This error is often related to accessibility issues and can be resolved by ensuring proper table structure and associations. To fix this error in pages that use Kendo grids with dynamically generated columns, you can follow these steps: Ensure that each table cell ( ) has a corresponding table header ( ) within the same row ( ) in the table structure. This association can be established by using the "headers" attribute in the element, which should contain the ID of the corresponding element. Column 1 Column 2 Cell 1 Cell 2 If the Kendo grid columns are dynamically generated, you can dynamically assign the "headers" attribute to the table cells using JavaScript or jQuery. You can retrieve the IDs of the corresponding table headers and set them as the "headers" attribute value for each cell. // Assuming the Kendo grid columns are stored in an array called "columns" columns.forEach(function(column, index) { var headerId = "header" + (index + 1); var cell = document.getElementById("cell" + (index + 1)); cell.setAttribute("headers", headerId); });

AXE Error-- in JQUERY

Answers (1)