SuperAPI AI 工具集

th-has-data-cells

前端与建站

查看项目

更新于 10-16 07:14

技能介绍

用途:这是 thedaviddias/front-end-checklist 中的一条前端可访问性规则,用于在审查渲染后的 HTML、交互组件或设计系统模式时,检查表格表头是否与数据单元格正确关联。孤立、没有对应数据单元格的表头可能让辅助技术用户产生困惑,也往往意味着表格结构存在问题。

主要能力:提供 Quick Reference、Check、Fix、Explain 与 Code Review 等指导内容。Quick Reference 指出:每个 <th> 必须与一个或多个 <td> 关联;避免不描述任何数据的空表头;移除多余表头以减少屏幕阅读器噪音。Check 用于验证所有 <th> 是否与数据单元格正确关联;Fix 用于移除空表头或确保其正确映射到数据单元格;Explain 说明为何每个表头都需有对应数据以维持可访问的表格结构。Code Review 部分要求检查渲染标记与交互状态,标出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何使用浏览器可访问性工具或辅助技术验证修复。

使用方式:在代码审查或可访问性检查中,将本规则作为核对项,针对页面中的表格逐一确认表头与数据单元格的关联关系,发现问题后按 Fix 建议处理,并用浏览器可访问性工具或屏幕阅读器复核。完整的实现细节、代码示例与框架相关指引见 references/rule.md。

适用场景:审查 HTML 表格、交互组件或设计系统模式的可访问性时使用。

限制:资料未提供具体框架代码示例、安装命令、收费或价格信息,完整实现细节需查阅上述 references/rule.md 与规则页面。