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

Question

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

<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>

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

Answer 1

简短回答

没有特殊的方法来指示特定单元格、列或行不包含实际数据。也没有关于在哪里放置表行操作按钮的具体建议。

然而，作为一名盲人用户，我建议将操作按钮放置在其专用栏中。请注意，在这种情况下，添加的列必须具有非空标题。

更长的答案

逐个单元格、逐列浏览冗长的表格，而不是逐行线性导航的情况并不少见。例如，对于 Jaws 或 NVDA，可以使用 Ctrl+Alt+箭头键来完成此操作。

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

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

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

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