关于 table-accessibility
用于设计易访问数据表的技能，面向需要呈现行列关系的界面设计者。内容涵盖语义化表头与标签、简化结构、响应式呈现和可读性建议。
主要功能
- 01表格用于呈现二维数据
- 02添加带 scope 的行列标题
- 03为表格提供标题或标签
- 04优先采用简单表格结构
- 05规划小屏幕响应式视图
- 06可读性建议与检查清单
适用场景
- 01设计易访问的对比表
- 02让屏幕阅读器用户能使用日程表
- 03检查适配移动屏幕的表格布局
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/table-accessibility确认已加载。
详细介绍
表格无障碍设计
设计表格时，应清晰传达结构和关系——不仅要方便能看到内容的用户浏览行和列，也要方便使用屏幕阅读器、一次导航一个单元格的用户。
何时使用表格
表格适用于数据在两个维度（行和列）上存在关联的情况。不要将表格用于布局。
- 使用表格：比较不同产品的功能、展示日程安排、呈现分类一致的数据
- 不要使用表格：布局表单、排列卡片、创建彼此无关内容的视觉分栏
核心要求
每个表格都需要表头
- 列标题：使用带有 scope="col" 的
- 行标题：使用带有 scope="row" 的
- 屏幕阅读器会在每个单元格前播报标题，让用户始终知道自己所在的行和列
- 如果没有表头，屏幕阅读器用户听到的只是一串互不相关的值，无法了解其上下文
每个表格都需要标题或标签
- HTML 表格使用 元素
- 或使用 aria-labelledby 指向可见标题
- 标题应说明表格包含的内容： “Standard、Pro 和 Enterprise 套餐的价格比较”
- 不要只写“表格 1”或“数据”
简单表格优于复杂表格
- 优先使用只有一行列标题的简单表格
- 尽可能避免合并单元格（colspan、rowspan）
- 如果必须合并单元格，请使用正确的 headers/id/scope 关联
- 如果表格必须合并单元格才能表达清楚，请考虑将其拆分为多个更简单的表格
表格的认知无障碍设计
视觉设计
- 使用斑马纹（交替行颜色）有助于跟踪行
- 提供充足的单元格内边距（至少 8px），避免内容拥挤
- 数字右对齐，文本左对齐，以提高可读性
- 使用更强的对比度突出表头行
降低复杂度
- 最多使用 5–7 列，以便轻松浏览
- 如果需要更多列，请考虑采用其他格式，或允许用户显示/隐藏列
- 在复杂表格上方提供摘要或关键结论
- 不要要求用户横向滚动——让表格适配不同屏幕
响应式表格
- 在小屏幕上：转换为卡片/列表视图，将每一行显示为带标签的卡片
- 或允许横向滚动，并固定首列
- 在较小屏幕上，绝不能隐藏数据而不提供访问方式
- 测试：移动设备用户能否访问每一项数据？
评估清单
- 所有表格都有列标题和/或行标题，并设置了正确的 scope
- 所有表格都有标题或无障碍标签
- 没有合并单元格（如无法避免，则正确关联表头）
- 表格能适配小屏幕
- 表格未用于视觉布局
- 复杂表格附有关键发现的文本摘要
- 单元格内边距和间距有助于提高可读性
评论
支持 Markdown