如何写通达htmltable？

Question

我网站上的一个 table 已被辅助功能插件 (aXe) 标记。经过一些修补，它最终说我必须解决以下两件事：

<th> 元素只应在单行且单列 headers
Table 具有 rowspan 属性不等于 1 的单元格

我如何合理地构建具有嵌套信息级别的 table 且至少不违反其中一个级别？

我的table代码是：

<table>
    <tbody>
        <tr>
            <th scope="col" rowspan="2">Type Of</th>
            <th scope="col" colspan="2">Blue</th>
            <th scope="col" colspan="2">Green</th>
        </tr>
        <tr>
            <td scope="col" class="centered">Light Blue</td>
            <td scope="col" class="centered">Dark Blue</td>
            <td scope="col" class="centered">Light Green</td>
            <td scope="col" class="centered">Dark Green</td>
        </tr>
        <tr>
            <th scope="row">Type 1</th>
            <td class="centered">Y</td>
            <td class="centered">Y</td>
            <td class="centered">Y</td>
            <td class="centered">N</td>
        </tr>
        <tr>
            <th scope="row">Type 2</th>
            <td class="centered">Y</td>
            <td class="centered">Y</td>
            <td class="centered">Y</td>
            <td class="centered">N</td>
        </tr>
        <tr>
            <th scope="row">Type 3</th>
            <td class="centered">Y</td>
            <td class="centered">Y</td>
            <td class="centered">Y</td>
            <td class="centered">N</td>
        </tr>
    </tbody>
</table>

Answer 1

我不确定您使用的是什么工具，但您是否尝试过使用 col 和 colgroup 元素？ W3C 提供了一些关于数据 table 中不规则 headers 的基本信息 here。

另外，我根据你的 table 整理了一个快速的 JSFiddle，如果你想看看的话：https://jsfiddle.net/dngvc84o/

Answer 2

无障碍工具可以自由地发明自己的规则，但是这个工具是错误的，说你应该删除 table headers th 当你使用 rowspan 或 colspan。这是完全错误的。检查您是否拥有此工具的最新版本：这是一个糟糕的建议。

对于您的情况，您可以使用以下技术来标记列 headers： H43: Using id and headers attributes to associate data cells with header cells in data tables

你的例子有一个问题：第二行中的 headers 未标记为列 headers (th)（并且 headers 属性应仅引用 th 和 id） .

你的标记应该是这样的：

<table>
<thead>
    <tr>
        <th rowspan="2" id="typeof">Type Of</th>
        <th colspan="2" id="blue">Blue</th>
        <th colspan="2" id="green">Green</th>
    </tr>
    <tr>
        <th id="lightblue">Light</th>
        <th id="darkblue">Dark</th>
        <th id="lightgreen">Light</th>
        <th id="darkgreen">Dark</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th id="type1" headers="typeof">Type 1</th>
        <td headers="type1 lightblue" title="Yes">Y</td>
        <td headers="type1 darkblue" title="Yes">Y</td>
        <td headers="type1 lightgreen" title="Yes">Y</td>
        <td headers="type1 darkgreen" title="No">N</td>
    </tr>
    <tr>
        <th id="type2" headers="typeof">Type 2</th>
        <td headers="type2 lightblue" title="Yes">Y</td>
        <td headers="type2 darkblue" title="Yes">Y</td>
        <td headers="type2 lightgreen" title="Yes">Y</td>
        <td headers="type2 darkgreen" title="No">N</td>
    </tr>
    <tr>
        <th id="type3" headers="typeof">Type 3</th>
        <td headers="type3 lightblue" title="Yes">Y</td>
        <td headers="type3 darkblue" title="Yes">Y</td>
        <td headers="type3 lightgreen" title="Yes">Y</td>
        <td headers="type3 darkgreen" title="No">N</td>
    </tr>
</tbody>
</table>

此外，我添加了一个 title 属性，以便为屏幕阅读器添加一个可说的替代方案（您可以使用 aria-label 但 title 为其他人添加了一个工具提示，除了它对键盘不友好）。更好的选择是在这里有一个完整的词。

如何写通达htmltable？

how to write accessible html table?

html

accessibility

html-table