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

Question

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

桌面

| 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 会导致可访问性问题吗？如果是，我们如何克服它？有没有办法让屏幕阅读器将divs 解释为table 元素？

Answer 1

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

可以响应式样式设置表格以适应您描述的布局更改。我的建议是使用表格元素并在较小宽度的媒体查询中使用不同的样式。

表格样式：

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

Answer 2

是的。如果您删除表结构，则屏幕阅读器无法向用户显示该结构。