--- 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 禁用） □ 表单标签与输入关联（） □ 表格有正确的表头（） ``` #### 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 可读性 ``` □ 页面语言已声明（） □ 外语部分标注语言（lang 属性） □ 缩写有解释 ``` #### 3.2 可预测 ``` □ 聚焦不自动触发上下文变化 □ 输入不自动触发意外变化 □ 导航一致（各页面相同位置） □ 组件行为一致 ``` #### 3.3 输入辅助 ``` □ 错误被识别并描述 □ 有输入提示/标签 □ 错误有修复建议 □ 重要操作可确认/撤销 □ 表单有上下文帮助 ``` ### 4. Robust（健壮性）内容必须能被各种用户代理解析。 #### 4.1 兼容性 ``` □ HTML 有效（无解析错误） □ 元素有完整的开始和结束标签 □ ID 唯一 □ 自定义组件有正确的 ARIA role □ name, role, value 可通过辅助技术获取 □ 状态变化有通知（aria-live） ``` ## 代码检查清单 ### HTML 结构 ```html 描述性标题 - 网站名

页面标题

章节标题

点击这里

``` ### 图片 ```html 2024年销售增长图表，1月100万，12月500万

``` ### 表单 ```html 邮箱地址我们不会分享您的邮箱 ``` ### 颜色对比度 ```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)