使垂直表格易于访问

Question

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

\n

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

\n

我需要这样显示它：

\n

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

\n

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

\n

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

\n

\n

注意：某些屏幕阅读器会读取 \xe2\x80\x9cVenue\xe2\x80\x9d 单元格中的 \xe2\x80\x9cDate \xe2\x80\x93 Event \xe2\x80\x93 Venue\xe2\x80\x9d ，因为元素的方向<th>不明确。

\n

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

我的问题是像这样的垂直表格的可访问性如何，我最好使用<ul>一些弹性盒或网格魔术来获得我的样式要求并将数据设置为列表吗？还有我没有考虑的替代方案吗？

\n

Answer 1

如果编码正确，屏幕阅读器绝对可以访问表格。您的示例（以及 W3 示例）中唯一缺少的是<th>. 您应该始终指定该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）向下导航到下一个单元格时，他们将首先听到宣布的行标签，然后听到数据单元格值，例如“明尼苏达州”。