使垂直表格易于访问

Question

我有一些非常基本的数据，如下所示：

{
  "name": "John Doe",
  "city": "Minneapolis",
  "state": "Minnesota",
  "country": "United States",
  "age": "42"
}

我需要像这样显示它：

| name    | John Doe      |
| city    | Minneapolis   |
| state   | Minnesota     |
| country | United States |
| age     | 42            |

正如您所看到的，上面的表格标题左对齐，行值全部对齐。

根据W3，做垂直表格的方法就像下面的代码片段，但他们还指出：

注意：某些屏幕阅读器会在“地点”单元格中读取“日期 - 事件 - 地点”，因为 元素的方向不明确。

table th {
 text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>City</th>
    <td>Minneapolis</td>
  </tr>
  <tr>
    <th>State</th>
    <td>Minnesota</td>
  </tr>
  <tr>
    <th>Country</th>
    <td>United States</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>42</td>
  </tr>
</table>

我的问题是这样的垂直表格的可访问性如何，我最好使用

和一些 Flexbox 或网格魔术来获得我的样式要求并将数据设置为列表吗？还有我没有考虑的替代方案吗？

Answer 1

如果编码正确，屏幕阅读器绝对可以访问表格。您的示例（以及 W3 示例）中唯一缺少的是 的范围。您应该始终指定scope属性，以便它明确说明表标题是针对行还是列。当您省略 scope 时，不要依赖浏览器或屏幕阅读器来“猜测”含义。

当指定 scope 时，标头的方向没有任何歧义。

<table>
  <tr>
    <th scope="row">Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th scope="row">City</th>
    <td>Minneapolis</td>
  </tr>
  <tr>
    <th scope="row">State</th>
    <td>Minnesota</td>
  </tr>
  <tr>
    <th scope="row">Country</th>
    <td>United States</td>
  </tr>
  <tr>
    <th scope="row">Age</th>
    <td>42</td>
  </tr>
</table>

现在，当屏幕阅读器用户导航到数据单元格（例如“明尼阿波利斯”）时，他们然后使用表格导航键（例如 ctrl+alt+向下箭头），他们会先听到行标签，然后听到数据单元格值，例如“明尼苏达州”。

Answer 2

由于没有多个人并且您列出了键/值对，因此 描述列表元素比表格元素更合适。

HTML 元素表示描述列表。该元素包含术语组列表（使用

元素指定）和描述（由

元素提供）。此元素的常见用途是...显示元数据（键值对列表）。

dl {
  display: grid;
  grid-template: auto / auto auto;
  justify-content: start;
  column-gap: 1ch;
}
dd {
  margin: 0;
}

<dl>
  <dt>name</dt>
  <dd>John Doe</dd>
  <dt>city</dt>
  <dd>Minneapolis</dd>
  <dt>state</dt>
  <dd>Minnesota</dd>
  <dt>country</dt>
  <dd>United States</dd>
  <dt>age</dt>
  <dd>42</dd>
</dl>