无障碍实现规范（WCAG 2.1 AA）

必须项

• - 所有图片必须有有意义的 alt 文字
• 交互元素必须可键盘访问（Tab、Enter、Space、Escape）
• 表单元素必须有关联
• 模态框必须捕获焦点并支持 Esc 关闭

ARIA 使用原则

• - 优先使用语义化 HTML，而非 ARIA
• role 属性不覆盖原生语义
• 动态内容更新使用 aria-live

可访问性检查

在以下场景使用该 Skill：

• - 实现或评审表单、对话框、菜单、表格、标签页、树、抽屉和自定义组件
• 将设计稿转换为代码
• 页面上线前做 QA 或发布前检查

检查清单

• - 语义地标和标题层级
• 表单标签与描述
• 按钮和链接命名
• 键盘导航顺序
• 焦点环是否可见
• 对话框焦点锁定与关闭后焦点恢复
• 在需要时正确使用 aria-expanded / aria-controls / aria-selected
• 表格语义是否正确
• 是否存在明显的颜色对比度风险
• 纯图标控件是否具备可访问名称
• 在需要时是否对 loading、empty、error 状态进行了提示

输出格式

无障碍检查报告

生成时间: YYYY-MM-DD HH:mm
评审工具: frontend-craft
标准: WCAG 2.1 AA

🔴 必须修复 (N项)

• - [文件:行号] 问题描述 → 建议修改

🟡 建议改进 (N项)

• - [文件:行号] 问题描述 → 建议修改

✅ 已通过项

• - ...

建议的代码修改

• - ...

报告文件输出

检查完成后，必须将报告内容使用 Write 工具保存为 Markdown 文件：

• - 目录：项目根目录下的 reports/（如不存在则创建）
• 文件名：accessibility-review-YYYY-MM-DD-HHmmss.md（使用当前时间戳）
• 保存后告知用户报告文件路径

务求实用。优先使用原生语义，不要过度依赖 ARIA。