1

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

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

<td scope="row">

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

  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

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

4

1 回答 1

2

仅仅因为一个单元格是一个 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 网格标记来指向标题。您可能还应该测试该解决方案的可用性。

于 2015-03-31T12:23:08.850 回答