如何标记在 HTML5 中也充当行 header 的数据单元格？

Question

我正在尝试创建语义正确且可访问的 (WCAG 2.0) HTML5 数据 table。第一列包含的数据也用作行的 header。

在 HTML 4.01 / XHTML 1.0 中，我曾经使用 scope 属性将这些单元格标记为 td：

<td scope="row">

在 HTML5 中，td 元素不再允许使用 scope 属性。语义和可访问性的最佳方法是什么？

将第一列的单元格标记为th（数据方面丢失？）
将第一列中的单元格标记为 td 并放松 header 方面

恐怕在第二种情况下 table 会更难访问。

这种情况让我开始思考数据 table 的一般情况：在哪种情况下您会仅使用列 header？因为数据的性质table暗示了一行中单元格中数据之间的关系。对于可访问性，行不应该也总是得到一个 header 来传达这种关系吗？

例如这个table:

Principle                                    | Corresponding guidelines
------------------------------------------------------------------------
Never leave a child unattended               | 1, 3, 8
Always communicate what you are going to do  | 4, 5, 6
Calm down before you take action             | 5,9,13

您认为第一列中的单元格（原则）是第二列的 header 单元格，还是数据单元格？换句话说：您将以何种方式标记此 table?

Answer 1

仅仅因为单元格是 TH，并不意味着它也不是数据。您应该将 TH 与 scope="row" 一起使用。在 HTML4 中，您可以在 TD 单元格上放置范围属性，在 HTML5 中，不再接受在 TD 单元格上设置范围属性。

<table>
    <thead>
        <tr>
            <th scope="col">Principle</th>
            <th scope="col">Corresponding Guidelines</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Never leave a child unattended</th>
            <td>...</td>
        </tr>
    </tbody>
</table>

一般来说，大多数数据表都有一个可以被视为 header 单元格的单元格。我看到了该规则的例外情况 - 特别是对于自动生成的数据（例如日志文件数据），其中行中的每个元素都同等重要，没有什么可以真正被视为 header.

在这些情况下，您可以决定根据排序标准动态设置 header，但这很难跨辅助技术工作。如果您要这样做，您会希望使用带有 aria-labelledby 的 ARIA 网格标记来指向 header。您可能还应该测试该解决方案的可用性。

如何标记在 HTML5 中也充当行 header 的数据单元格？

How to markup data cell that also functions as row header in HTML5?

html

html-table

accessibility

semantic-markup

wcag2.0