用途
Table Accessibility 是一套用于设计无障碍数据表格的技能指南。它的目标是让表格不仅对扫视行列的视力正常用户清晰，也能让逐单元格导航的屏幕阅读器用户理解表格的结构与数据关系。该技能适用于创建或审查表格、数据网格、对比表、定价表等场景。
何时使用表格
表格用于具有两个维度（行和列）关系的数据。不要用表格做布局。
适合使用表格的场景：比较产品功能、显示日程安排、展示具有一致类别的数据。
不适合使用表格的场景：布局表单、排列卡片、创建不相关内容的视觉列。
核心要求
每个表格都需要标题
- 列标题：使用 scope="col"
- 行标题：使用 scope="row"
- 屏幕阅读器会在每个单元格前播报标题，因此用户始终知道自己在哪一列和哪一行
- 没有标题时，屏幕阅读器用户听到的是一串没有上下文的孤立值
每个表格都需要 caption 或标签
- HTML 表格使用 caption 元素
- 或使用 aria-labelledby 指向可见标题
- caption 描述表格包含的内容，例如“Standard、Pro 和 Enterprise 计划的价格比较”
- 不要只写“表格1”或“数据”
简单表格优于复杂表格
- 优先使用只有一行列标题的简单表格
- 尽可能避免合并单元格（colspan、rowspan）
- 如果必须合并单元格，使用正确的 headers/id/scope 关联
- 如果表格需要合并单元格才能理解，考虑是否应拆分为多个更简单的表格
表格的认知无障碍
视觉设计
- 斑马纹（交替行颜色）有助于行跟踪
- 充足的单元格内边距（至少8px）防止拥挤
- 数字右对齐，文本左对齐，便于阅读
- 用更强的对比度突出表头行
降低复杂度
- 最多5-7列，便于舒适扫视
- 如果需要更多列，考虑使用不同格式或允许用户显示/隐藏列
- 在复杂表格上方提供摘要或关键要点
- 不要要求水平滚动——让表格响应式
响应式表格
- 在小屏幕上：转换为卡片/列表视图，每行变成一个带标签的卡片
- 或允许水平滚动并固定第一列
- 永远不要在小屏幕上隐藏数据而不提供访问方式
- 测试：移动用户能否访问每一条数据？
评估清单
- 所有表格都有带正确 scope 的列标题和/或行标题
- 所有表格都有 caption 或无障碍标签
- 没有合并单元格（或如果不可避免，标题已正确关联）
- 表格在小屏幕上响应式
- 表格不用于视觉布局
- 复杂表格有关于关键发现的文本摘要
- 单元格内边距和间距支持可读性