使垂直 table 可访问

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            |

如您所见，上面的 table 有 headers 左对齐并且行值全部对齐。

According to W3, 做一个垂直的方法table 就像下面的代码片段，但他们也叫：

Note: Some screen readers will read “Date – Event – Venue” in the “Venue” cell because the direction of the <th> elements is ambiguous.

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>

我的问题是像这样的垂直 table 的可访问性如何，我最好使用 <ul> 和一些 flexbox 或网格魔法来满足我的样式要求并简单地列出数据作为清单？或许还有其他我没有考虑的选择？

Answer 1

表格绝对屏幕 reader 在编码正确时可以访问表格。您的示例（以及 W3 示例）中唯一缺少的是 <th> 的范围。您应该始终指定 scope 属性，以便它明确说明 table header 是针对行还是列。不要依赖浏览器或屏幕 reader 来“猜测”您遗漏 scope 的意思。

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

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

现在，当屏幕 reader 用户导航到数据单元格时，例如“明尼阿波利斯”，然后他们使用 table 导航键（例如 ctrl+alt+downarrow), 他们会先听到行标签，然后是数据单元格值，例如“明尼苏达州”。

Answer 2

由于没有多人，而您列出了 key/value 对，因此 description list element 比 table 元素更合适。

The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are...to display metadata (a list of key-value pairs).

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>

使垂直 table 可访问

Making a vertical table accessible

html

accessibility

html-table

wai-aria