HTML Table 表示 non-data table 单元格

Question

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

<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> 中（没有 header 列）吗？使用屏幕阅读器的人会感到困惑吗？就可访问性而言，这里的最佳做法是什么？

Answer 1

简答

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

但是，作为盲人用户，我会建议将操作按钮放在他们的专用栏中。请注意，在这种情况下，添加的列必须具有其 non-empty header.

更长的答案

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

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

但是，如果您将操作按钮放在它们的专用列中，则此特殊列必须有一个 non-empty header。这一点很重要，因为在经历 table 时，通常会在更改行或列时宣布 headers，并且 headers 也可以根据需要再次宣布。能够准确地知道我们在 table 中的位置非常重要，尤其是当它有许多行 and/or 列时。在没有 header.

的牢房里总是很奇怪

所以是的，你必须在相应的<th>中放一些东西。 “Actions”非常适合非常通用的用例。如果您不希望文本在屏幕上可见，同时将其保留在屏幕 reader 秒，您可以在 CSS.

中使用视觉隐藏文本的概念

您可能想使用 colspan 使最后一列 header 花费两列而不是放置一个特殊的 <th>Actions</th>。不要这样做。跨列和跨行的可访问性通常比空 header.

更差

HTML Table 表示 non-data table 单元格

HTML Table denoting non-data table cell

html

accessibility

w3c

简答

更长的答案