使用常规 div 标签而不是 table 和相关标签会影响可访问性吗？

Question

我有一个 table，它应该在较大的屏幕上显示典型的 table 布局，并且在较小的屏幕上应该成为列视图。例如。

桌面

| Name  | age |
| Bob   | 48  |
| Jane  | 50  |

移动端（以下为列表）

--------
Name:Bob,
Age: 48
-------
Name:Jane,
Age: 50

使用常规 div 标签而不是通常的 table 标记会导致可访问性问题吗？

我不喜欢通常的 table 标记的原因是它对于复杂的 UI 不灵活。例如，如果你想在每一行之后添加边距，你必须操作 border-collapse border-spacing 并做一大堆其他事情。

我的问题是。使用带有 grid/flex 属性的常规 divs 会导致可访问性问题吗？如果是，我们如何克服它？有没有办法让屏幕 reader 将 divs 解释为 table 元素？

Answer 1

是的。如果删除 table 结构，则屏幕 reader 无法向用户显示该结构。

Answer 2

是的，使用 div 标记表格信息会导致可访问性问题。辅助技术可以轻松解析 table 并为用户提供简单且一致的信息导航方式。 Div 没有辅助技术可以解析的语义——除非您小心地添加适当的 aria-role attributes.

Tables 可以响应式设置样式以适应您描述的布局更改。我的建议是使用 table 元素，并使用较小宽度的媒体查询对它们进行不同的样式设置。

Table 样式为 table:

table {
  border-collapse: collapse;
}
table th,
table td {
  padding: 1ch;
  border: 1px solid black;
}

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td data-heading="Name">Bob</td>
    <td data-heading="Age">48</td>
  </tr>
  <tr>
    <td data-heading="Name">Jane</td>
    <td data-heading="Age">50</td>
  </tr>
</table>

相同的可访问 table 标记样式为列表：

table,
tbody,
tr,
td {
  display: block;
}
tr:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
tr {
  border-top: 1px solid black;
  padding: 1ch;
}
td:before {
  content: attr(data-heading) ": ";
  font-weight: bold;
}

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td data-heading="Name">Bob</td>
    <td data-heading="Age">48</td>
  </tr>
  <tr>
    <td data-heading="Name">Jane</td>
    <td data-heading="Age">50</td>
  </tr>
</table>

使用常规 div 标签而不是 table 和相关标签会影响可访问性吗？

Does using regular div tags instead of table and related tags affect accessibility?

html

css

html-table

accessibility