SuperAPI AI 工具集

table-headers

前端与建站

查看项目

更新于 10-16 08:49

技能介绍

用途:审查渲染后的 HTML、交互组件或设计系统模式时,检查数据表格的表头是否被正确定义,使屏幕阅读器能为每个数据单元格播报其所属的行列上下文,从而让复杂表格更易理解。

主要能力:提供检查、修复与解释三类操作。检查确认所有数据表格是否使用 th 元素作为表头并带有合适的 scope 属性;修复将表头单元格改为 th 并添加正确的 scope;解释 th 与 scope 如何帮助辅助技术传达数据表格结构。

必要用法:优先检查原生语义,再考虑其他方案。使用 th 而非 td 表示表头;应用 scope="col" 或 scope="row" 明确表头关系;确保每个数据单元格至少与一个表头关联。简单表格中,应先修复表头关联,再考虑 caption 层面的建议;直接表头行缺少 scope="col" 通常是最清晰的首个修复点。代码审查时需查看渲染标记和影响该规则的交互状态,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何用浏览器可访问性工具或辅助技术验证修复。

适用场景:前端可访问性审查、设计系统组件评审、代码审查与屏幕阅读器兼容性验证。

限制:资料未提供具体框架实现细节、完整代码示例或更多背景说明,相关细节见 references/rule.md。