表示非数据表格单元格的 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> 中吗（没有列标题）？使用屏幕阅读器的人会不会感到困惑？就可访问性而言，这里的最佳做法是什么？

解决方法

简答

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

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

更长的答案

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

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

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

所以是的，您必须在相应的 <th> 中放入一些内容。 “操作”并不适合非常通用的用例。 如果您不希望文本在屏幕上可见，同时为屏幕阅读器保留文本，您可以使用 CSS 中视觉隐藏文本的概念。

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