html - 用于 HTML 表格单元格而不是跨越多列的正确范围值是多少？

Question

假设您有一个 HTML 表格，带有 <th>跨越多列的单元格，例如

<table>
    <tr>
        <th colspan="3" scope="?">Scores</th>
        <!-- ...more headings here... -->
    </tr>
    <tr>
        <th scope="col">English</th>
        <th scope="col">Maths</th>
        <th scope="col">Science</th>
        <!-- ...more sub-headings here... -->
    </tr>
    <tr>
        <td>12</td>
        <td>16</td>
        <td>20</td>
        <!-- ...more cells here... -->
    </tr>
</table>

跨越标题单元格的范围属性的正确值是多少？ col似乎不正确，因为它是几列的标题，但是 colgroup如果我实际上没有 colgroup 似乎不对标签。

Answer 1

WebAIM(Web Accessibility in Mind)小组在 creating accessible data tables 上发表了一篇很棒的文章.总体而言，他们建议避免跨行或跨列，因为屏幕阅读器无法可靠地解释标记。

除了完全避免跨列外，我还非常幸运地结合使用了 id/headers 属性和 scope 属性。尽管标记更加冗长，但这似乎简化了 JAWS 的操作，因此它在解释数据时遇到的麻烦更少。

这就是您的示例带有 id/headers 的样子:

<table>
    <tr>
        <th id="scores" colspan="3">Scores</th>
    </tr>
    <tr>
        <th id="english" scope="col">English</th>
        <th id="maths" scope="col">Maths</th>
        <th id="science" scope="col">Science</th>
    </tr>
    <tr>
        <td headers="scores english">12</td>
        <td headers="scores maths">16</td>
        <td headers="scores science">20</td>
    </tr>
</table>