时间戳

首页 > 解决方案 > 表示非数据表格单元格的 HTML 表格

html - 表示非数据表格单元格的 HTML 表格

问题描述

我想知道是否有办法将表格中的某些元素/表格单元格表示为非数据？例如，如果我在每一行的末尾都有一个按钮：

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>data A1</td>
    <td>data A2</td>
    <button onclick="doSomething()">Do Something</button>
  </tr>
  <tr>
    <td>data B1</td>
    <td>data B2</td>
    <button onclick="doSomething()">Do Something</button>
  </tr>
</table>

将按钮放在每个位置的正确方法是<tr>什么？我应该把它放在一个<td>（没有列标题）吗？使用屏幕阅读器的人会不会感到困惑？就可访问性而言，这里的最佳做法是什么？

标签： htmlaccessibilityw3c

解决方案

简短的回答

没有特殊的方法可以表明特定的单元格、列或行不包含实际数据。也没有关于在何处放置表格行的操作按钮的具体建议。

但是，作为一个盲人用户，我建议将操作按钮放在他们的专用列中。请注意，在这种情况下，添加的列必须具有非空标题。

更长的答案

逐个单元格、逐列而不是逐行线性地浏览冗长的表格并不罕见。对于 Jaws 或 NVDA，这可以通过例如 Ctrl+Alt+箭头键来完成。

在这种情况下，将操作按钮放在单独的列中可以防止屏幕阅读器一遍又一遍地重复相同的按钮。在您的示例中，如果我们在第二列上逐行导航，则将按钮与您所做的数据放在同一个单元格中会给出“数据 A2，做某事按钮”，然后是“数据 B2，做某事按钮”。将按钮放在单独的列中可以避免这种情况。

但是，如果您将操作按钮放在其专用列中，则此特殊列必须具有非空标题。这很重要，因为在遍历表格时，通常会在更改行或列时宣布标题，并且也可以根据需要再次宣布标题。能够准确地知道我们在表中的位置很重要，尤其是当它有很多行和/或列时。在没有标题的单元格中总是很奇怪。

所以是的，你必须在相应的<th>. “Actions”不适合非常通用的用例。如果您不希望文本在屏幕上可见，同时保留给屏幕阅读器，您可以使用 CSS 中视觉隐藏文本的概念。

您可能很想使用 colspan 使最后一列标题花费两列，而不是放置一个特殊的<th>Actions</th>. 不要这样做。对于可访问性而言，列和行跨越通常比空标题更糟糕。

推荐阅读