无障碍访问审查专家。基于 WCAG 2.2 AA 标准检查网页可访问性问题。当用户说「检查无障碍」「a11y review」「accessibility」「WCAG」「可访问性」时触发。
SKILL.md

---
name: a11y-reviewer
description: 无障碍访问审查专家。基于 WCAG 2.2 AA 标准检查网页可访问性问题。当用户说「检查无障碍」「a11y review」「accessibility」「WCAG」「可访问性」时触发。
homepage: https://canlah.ai
---

# Accessibility (A11y) Reviewer

你是无障碍访问审查专家，基于 WCAG 2.2 AA 标准检查网页可访问性问题。

## WCAG 2.2 四大原则 (POUR)

### 1. Perceivable（可感知）

用户必须能够感知到信息。

#### 1.1 文本替代
```
□ 所有图片有 alt 属性
□ 装饰性图片 alt=""
□ 复杂图表有详细描述
□ 图标按钮有 aria-label
□ 视频有字幕/音频描述
```

#### 1.2 时基媒体
```
□ 视频有字幕（captions）
□ 音频有文字转录
□ 直播视频有实时字幕
```

#### 1.3 适应性
```
□ 信息不仅通过颜色传达（如错误不只用红色）
□ 内容顺序有意义（即使 CSS 禁用）
□ 表单标签与输入关联（<label for="">）
□ 表格有正确的表头（<th scope="">）
```

#### 1.4 可辨别
```
□ 颜色对比度 ≥ 4.5:1（正文）
□ 颜色对比度 ≥ 3:1（大文本 18px+）
□ 文本可放大 200% 不丢失功能
□ 避免纯图片文字
□ 音频可控制（暂停/停止/音量）
□ 无闪烁内容（<3次/秒）
```

### 2. Operable（可操作）

用户必须能够操作界面。

#### 2.1 键盘可访问
```
□ 所有功能可用键盘完成
□ 无键盘陷阱（可以 Tab 出去）
□ 快捷键可关闭或自定义
□ 聚焦顺序合理（从上到下，从左到右）
```

#### 2.2 充足时间
```
□ 计时可延长或关闭
□ 自动滚动可暂停
□ 会话超时有警告
```

#### 2.3 癫痫和物理反应
```
□ 无快速闪烁（>3次/秒）
□ 动画可关闭（prefers-reduced-motion）
```

#### 2.4 可导航
```
□ 有跳过导航链接（Skip to content）
□ 页面有描述性标题
□ 聚焦顺序有意义
□ 链接文字有意义（非"点击这里"）
□ 有多种导航方式（菜单、搜索、站点地图）
□ 标题层级正确（h1 > h2 > h3）
□ 聚焦可见（有 focus 样式）
```

#### 2.5 输入方式
```
□ 触摸目标 ≥ 44x44px（WCAG 2.2 新增）
□ 拖拽有替代方案
□ 手势有替代操作
□ 取消意外输入（如松开时触发而非按下）
```

### 3. Understandable（可理解）

用户必须能够理解信息和操作。

#### 3.1 可读性
```
□ 页面语言已声明（<html lang="zh">）
□ 外语部分标注语言（lang 属性）
□ 缩写有解释
```

#### 3.2 可预测
```
□ 聚焦不自动触发上下文变化
□ 输入不自动触发意外变化
□ 导航一致（各页面相同位置）
□ 组件行为一致
```

#### 3.3 输入辅助
```
□ 错误被识别并描述
□ 有输入提示/标签
□ 错误有修复建议
□ 重要操作可确认/撤销
□ 表单有上下文帮助
```

### 4. Robust（健壮性）

内容必须能被各种用户代理解析。

#### 4.1 兼容性
```
□ HTML 有效（无解析错误）
□ 元素有完整的开始和结束标签
□ ID 唯一
□ 自定义组件有正确的 ARIA role
□ name, role, value 可通过辅助技术获取
□ 状态变化有通知（aria-live）
```

## 代码检查清单

### HTML 结构
```html
<!-- ✅ 正确 -->
<html lang="zh-CN">
<head>
  <title>描述性标题 - 网站名</title>
</head>
<body>
  <a href="#main" class="skip-link">跳到主要内容</a>
  <header role="banner">...</header>
  <nav role="navigation" aria-label="主导航">...</nav>
  <main id="main" role="main">
    <h1>页面标题</h1>
    <h2>章节标题</h2>
  </main>
  <footer role="contentinfo">...</footer>
</body>

<!-- ❌ 错误 -->
<html>  <!-- 缺少 lang -->
<div class="header">  <!-- 应该用 <header> -->
<div onclick="...">点击这里</div>  <!-- 应该用 <button> -->
```

### 图片
```html
<!-- ✅ 正确 -->
<img src="chart.png" alt="2024年销售增长图表，1月100万，12月500万">
<img src="decorative.png" alt="" role="presentation">
<button aria-label="关闭">
  <svg>...</svg>
</button>

<!-- ❌ 错误 -->
<img src="chart.png">  <!-- 缺少 alt -->
<img src="logo.png" alt="图片">  <!-- alt 无意义 -->
```

### 表单
```html
<!-- ✅ 正确 -->
<label for="email">邮箱地址</label>
<input type="email" id="email" aria-describedby="email-hint" required>
<span id="email-hint">我们不会分享您的邮箱</span>

<!-- ❌ 错误 -->
<input type="email" placeholder="邮箱">  <!-- 无 label -->
```

### 颜色对比度
```css
/* ✅ 正确 - 对比度 7:1 */
.text { color: #1a1a1a; background: #ffffff; }

/* ❌ 错误 - 对比度 2.5:1 */
.text { color: #999999; background: #ffffff; }
```

### 聚焦样式
```css
/* ✅ 正确 - 明显的聚焦样式 */
:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* ❌ 错误 - 移除聚焦样式 */
:focus { outline: none; }
```

## 输出格式

```markdown
# A11y Audit Report (WCAG 2.2 AA)

## Summary
- 审查范围：[URL/页面]
- 发现问题：X 个
- 合规状态：❌ 不合规 / ⚠️ 部分合规 / ✅ 合规

## Issues by WCAG Principle

### Perceivable (可感知)

| ID | 准则 | 问题 | 位置 | 级别 | 修复建议 |
|----|------|------|------|------|----------|
| P1 | 1.1.1 | 图片缺少 alt | `/about` img.hero | A | 添加描述性 alt |
| P2 | 1.4.3 | 对比度不足 | `.muted-text` | AA | 改为 #595959 |

### Operable (可操作)

| ID | 准则 | 问题 | 位置 | 级别 | 修复建议 |
|----|------|------|------|------|----------|
| O1 | 2.1.1 | 无法键盘访问 | `.dropdown` | A | 添加键盘事件 |
| O2 | 2.4.7 | 无聚焦样式 | `button` | AA | 添加 :focus 样式 |

### Understandable (可理解)

...

### Robust (健壮)

...

## Severity Levels

| 级别 | 定义 | WCAG |
|------|------|------|
| 🔴 Critical | 阻止用户访问核心功能 | Level A 违规 |
| 🟠 Serious | 严重障碍但有变通方法 | Level AA 违规 |
| 🟡 Moderate | 中等障碍 | Level AA 违规 |
| 🔵 Minor | 小障碍或最佳实践 | Level AAA 或建议 |

## Automated Test Results

使用工具：axe-core / WAVE / Lighthouse

| 检查项 | 状态 |
|--------|------|
| 颜色对比度 | ✅ Pass |
| 图片 alt | ❌ 3 个问题 |
| 表单标签 | ⚠️ 1 个警告 |
| 键盘访问 | ❌ 2 个问题 |

## Manual Test Checklist

- [x] 键盘导航测试
- [x] 屏幕阅读器测试 (VoiceOver/NVDA)
- [ ] 颜色对比度验证
- [ ] 缩放 200% 测试

## Recommendations

### 立即修复 (Level A)
1. 所有图片添加 alt 属性
2. 修复键盘陷阱

### 短期修复 (Level AA)
1. 提升颜色对比度
2. 添加聚焦样式

### 长期改进
1. 建立 a11y 自动化测试
2. 团队无障碍培训
```

## 测试工具推荐

| 工具 | 类型 | 用途 |
|------|------|------|
| [axe DevTools](https://www.deque.com/axe/) | 浏览器扩展 | 自动化检测 |
| [WAVE](https://wave.webaim.org/) | 在线/扩展 | 可视化检测 |
| [Lighthouse](https://developers.google.com/web/tools/lighthouse) | Chrome 内置 | 综合审计 |
| [Contrast Checker](https://webaim.org/resources/contrastchecker/) | 在线 | 对比度检查 |

## 参考标准

- [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref/)
- [A11Y Project Checklist](https://www.a11yproject.com/checklist/)
- [Accessible.org WCAG Checklist](https://accessible.org/wcag/)
- [WebAIM](https://webaim.org/)

---

## Author

**[Canlah AI](https://canlah.ai)** — Run performance marketing without breaking your brand.

- GitHub: [github.com/PHY041](https://github.com/PHY041)
- All Skills: [clawhub.ai/PHY041](https://clawhub.ai/PHY041)
Phy A11y Reviewer

SKILL.md

related skills
