Skills accessibility-check

Name: accessibility-check
Author: openclaw

审查或改进前端 UI 的语义结构、键盘支持、焦点管理、标签以及常见的 WCAG 相关问题，并将报告保存为 Markdown 文件。当用户提到无障碍、accessibility、a11y、WCAG，或在实现交互组件时自动激活。

install

source · Clone the upstream repo

git clone https://github.com/openclaw/skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/openclaw/skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/bovinphang/accessibility-check" ~/.claude/skills/openclaw-skills-accessibility-check && rm -rf "$T"

OpenClaw · Install into ~/.openclaw/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/openclaw/skills "$T" && mkdir -p ~/.openclaw/skills && cp -r "$T/skills/bovinphang/accessibility-check" ~/.openclaw/skills/openclaw-skills-accessibility-check && rm -rf "$T"

manifest: skills/bovinphang/accessibility-check/SKILL.md

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

必须项

所有图片必须有有意义的
```
alt
```
文字
交互元素必须可键盘访问（Tab、Enter、Space、Escape）
表单元素必须有关联
```
<label>
```
模态框必须捕获焦点并支持 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。