特定 table HTML 的辅助功能合规性

Question

我有一个 HTML 布局引擎，它有一个通用组件，可以在 ol HTML、ul HTML 和 table HTML 结构之间切换

<component>
    <ul>
        <li>
            <div> Enter Data here </div>
        </li>
        <li>
            <div> Enter Data here </div>
        </li>
    </ul>
</component>

或

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

我已经使用 WAVE/AXE/Lighthouse 验证了 Table 的 HTML 结构，它似乎工作正常。

如果我的布局引擎在 table HTML 中创建一些额外的 div 会有什么问题吗？我的布局引擎在 tr 和 td 元素之间创建了一个 div。从可访问性的角度来看，是否会由此产生任何问题？

Answer 1

我认为 <table> 结构无效，这将违反 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，本质上是 <script> 元素。因此，将 <div> 作为 <tr> 的直接子代是无效的，并且可能导致屏幕 reader 试图读取 table.

Answer 2

您可以使用 <div role="row"> 代替标记 <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>

特定 table HTML 的辅助功能合规性

Accessibility compliance of specific table HTML

html

accessibility

wcag