AXE Error-- in JQUERY

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 elements in larger

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.

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
The error message "Non-empty

elements in larger must have an associated table header" typically occurs when there are table cells () in the table structure. This association can be established by using the "headers" attribute in the

) 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 (

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);
});