html-table - 如何正确处理没有标题行的 Html 表的可访问性

Question

我正在尝试在应用程序中构建一个设计，它看起来是表格数据，但没有标题行。我附上了下面的设计图片:

我尝试遵循互联网上的正常标记示例，但几乎每个示例都需要标题行。
我正在构建我的表格，如下所示:(样式已关闭)

<table>
  <tr>
    <th scope="row">Main Value</th>
    <td></td>
    <td>100.21 g</td>
  </tr>
  <tr>
    <th scope="row">Sub Category 1</th>
    <td>58 %</td>
    <td>58.15 g</td>
  </tr>
  <tr>
    <th scope="row">Sub Category 2</th>
    <td>42 %</td>
    <td>42.08 g</td>
  </tr>
  <tr>
    <th scope="row">Additional Value</th>
    <td></td>
    <td>71 g</td>
  </tr>
</table>

我可能会继续前进，但后来我开始在 Mac 上使用 Voice Over 得到非常糟糕的结果。

例如，当我越过第 2 行第 3 列时，我会看到第 3 行的标题:

也许这是一个错误？

也许这些不应该是表格或者应该由多个表格组成？

我希望有任何关于如何让 Voice Over 更好地阅读这些内容的想法，或者任何有关如何从语义上构造此类数据的信息。

Answer 1

数据表始终有两个信息轴。它们始终必须至少有一个标题行和一个标题列。 否则，如果您不能轻松地放置标题行和列来标记事物，即使只是从心理上、语义上来说，它也不是真正的数据表，即使它在视觉上看起来像一个数据表，并且需要更合适的标记，例如简单列表或定义列表，或者只是网格布局中呈现的简单文本。

在您的示例中，它确实看起来像一个真实的数据表，每行中有两条信息，并且各行之间始终相同。这甚至是数据表的基本定义:始终具有重复的相同属性集的项目集合。

如果我们以“subcategory 1”行为例，那么“58%”和“58.15g”这两个值是多少？ 我需要在某处找到它们代表的内容，并且此信息应该出现在标题行中。

这些数据对您来说可能非常明显，以至于您不需要该标题行，但对于您的读者、屏幕阅读器用户来说可能不是那么明显。

因此，我的建议是添加它，并使其在屏幕上可见。它还将帮助视力良好的用户理解数据。 除了理解数据之外，它还提供了添加过滤和排序的机会，以及为什么不进行列和/或行重新排序，如果表很大，这非常有用。

关于 colspan/rowspan 的旁注:作为屏幕阅读器用户，我认为在大多数情况下，最好使用空单元格而不是 colspan/rowspan。 它们通常会使导航变得更加困难，并且可能会迫使您使标记变得相当复杂，以使所有内容都正确宣布。如果不够清晰，一个简单的视觉隐藏“-”可以帮助明确告知该单元格为空或没有有意义的值。

rowspan/colspan 的一个很好的用例是当您有多个标题行或列时，以便创建组。简单示例:第一个标题行包含“早上”、“下午”、“晚上”和“晚上”，第二个标题行包含从 00 点到 23 点的时间。 否则，在数据本身内部使用 colspan/rowspan 通常不是一个好主意。