如何标记在 HTML5 中也用作行标题的数据单元格？

Question

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

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

<td scope="row">

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

1. 将第一列中的单元格标记为th（数据方面丢失了？）
2. 将第一列中的单元格标记为td 并松开标题方面

恐怕在第二种情况下，该表将不太容易访问。

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

例如这张表：

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

您会将第一列（原则）中的单元格视为第二列的标题还是数据单元格？换句话说：你会用什么方式标记这个表？

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>

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

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