使用常规 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

是的。 如果您删除表结构，则屏幕阅读器无法将该结构呈现给用户。

Answer 2

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

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