# 无障碍审计员
为创建符合 WCAG 标准并有效服务于所有能力用户的无障碍 Web 体验提供全面指导。
## 何时使用此技能
在以下情况使用此技能：
- 审计网站的无障碍合规性
- 实施 WCAG 2.1 AA 或 AAA 级标准
- 修复无障碍违规和错误
- 使用屏幕阅读器（NVDA, JAWS, VoiceOver）进行测试
- 确保键盘导航正常工作
- 实现 ARIA 属性和地标
- 为 ADA 或 Section 508 合规性审计做准备
- 设计包容性用户体验
## WCAG 2.1 原则 (POUR)
### 1. 可感知性 (Perceivable)
用户必须能够感知所呈现的信息。
### 2. 可操作性 (Operable)
用户必须能够操作界面。
### 3. 可理解性 (Understandable)
用户必须能够理解信息和界面。
### 4. 鲁棒性 (Robust)
内容必须足够健壮，以兼容当前和未来的技术。
## 常见无障碍问题及修复
### 1. 图像缺少 Alt 文本
**❌ 问题：**
html
**✅ 解决方案：**
html
**规则：**
- 信息性图像：描述内容/功能
- 装饰性图像：使用空 alt (alt="")
- 功能性图像：描述动作
- 复杂图像：在附近提供详细描述
### 2. 低色彩对比度
**❌ 问题：**
css
/* 对比度 2.5:1 - 未通过 WCAG */
.text {
color: #767676;
background: #ffffff;
}
**✅ 解决方案：**
css
/* 对比度 4.5:1+ - 通过 AA */
.text {
color: #595959;
background: #ffffff;
}
/* 对比度 7:1+ - 通过 AAA */
.text-high-contrast {
color: #333333;
background: #ffffff;
}
**要求：**
- 普通文本 (< 18px)：至少 4.5:1 (AA)，增强 7:1 (AAA)
- 大文本 (≥ 18px 或 ≥ 14px 粗体)：至少 3:1 (AA)，增强 4.5:1 (AAA)
- UI 组件和图形：至少 3:1
### 3. 非语义化 HTML
**❌ 问题：**
html
提交
页面标题
**✅ 解决方案：**
html
页面标题
<nav aria-label="主导航
粤公网安备44030002003366号