Accessibility compliance of specific table HTML - html

Question

I have an HTML layout engine that has a common component that can switch between ol HTML, ul HTML, and table HTML structure
<component>
<ul>
<li>
<div> Enter Data here </div>
</li>
<li>
<div> Enter Data here </div>
</li>
</ul>
</component>
OR
<component>
<table>
<tr>
<div>
<th>
Enter Data here
</th>
<th>
Enter Data here
</th>
</div>
</tr>
<tr>
<div>
<td>
Enter Data here
</td>
<td>
Enter Data here
</td>
</div>
</tr>
<tr>
<div>
<td>
Enter Data here
</td>
<td>
Enter Data here
</td>
</div>
</tr>
</table>
</component>
I have used WAVE/AXE/Lighthouse to validate the HTML structure of the Table and it seems to be working fine.
Is there any issue if my layout engine creates a few additional divs inside the table HTML?
My layout engine creates a div between the tr and td elements. Are there any issues that can arise from this with respect to accessibility standpoint?

Answer 1

I don't think the <table> structure is valid, which would violate WCAG 4.1.1. The html spec for <tr> says the content model is "Zero or more td, th, and script-supporting elements", where "script supporting" is defined here, https://html.spec.whatwg.org/multipage/dom.html#script-supporting-elements-2, which is essentially the <script> element. So having a <div> as an immediate child of a <tr> is not valid and could cause accessibility problems with a screen reader trying to read the table.

Answer 2

You can use <div role="row"> instead tag <tr>. Link to Accessible Rich Internet Applications (WAI-ARIA) 1.1. Row role
<component>
<div role="table">
<div role="row">
<span role="columnheader">
Enter Data here
</span>
<span role="columnheader">
Enter Data here
</span>
</div>
<div role="row">
<span role="cell">
Enter Data here
</span>
<span role="cell">
Enter Data here
</span>
</div>
<div role="row">
<span role="cell">
Enter Data here
</span>
<span role="cell">
Enter Data here
</span>
</div>
</div>
</component>