使垂直桌子易于使用

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，做垂直表格的方法就像下面的代码片段，但他们还喊出了：

注意：某些屏幕阅读器会在“地点”单元格中读取“日期 - 事件 - 地点”，因为

<th>

元素的方向不明确。

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>

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

<ul>

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

Answer 1

当编码正确时，屏幕阅读器“绝对”可以访问表格。您的示例（以及 W3 示例）中唯一缺少的是

<th> 的范围。您应该 always

 指定 

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+downarrow）向下导航到下一个单元格时，他们将首先听到宣布的行标签，然后是数据单元格值，例如“州，明尼苏达州”。

由于没有多人，并且您要列出键/值对，因此

Answer 2

比表格元素更合适。

<dl>

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

<dt>

元素指定）和描述（由 <dd>

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

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>