'Accessibility compliance of specific table HTML

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?

htmlaccessibilitywcag


Solution 1:[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.

Solution 2:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slugolicious
Solution 2

Related Questions