# 无障碍性 (a11y)
基于 WCAG 2.1 和 Lighthouse 无障碍性审计的综合指南。目标：使内容对所有人（包括残障人士）都可用。
## WCAG 原则: POUR
| 原则 | 描述 |
|-----------|-------------|
| **P**erceivable (可感知性) | 内容可以通过不同的感官感知 |
| **O**perable (可操作性) | 界面可由所有用户操作 |
| **U**nderstandable (可理解性) | 内容和界面易于理解 |
| **R**obust (鲁棒性) | 内容可与辅助技术兼容 |
## 一致性级别
| 级别 | 要求 | 目标 |
|-------|-------------|--------|
| **A** | 最低无障碍性 | 必须通过 |
| **AA** | 标准合规性 | 应该通过（许多司法管辖区的法律要求） |
| **AAA** | 增强无障碍性 | 建议具备 |
---
## 可感知性
### 文本替代 (1.1)
**图像需要 alt 文本:**
html
**图标按钮需要可访问的名称:**
html
**视觉隐藏类:**
css
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
### 颜色对比度 (1.4.3, 1.4.6)
| 文本大小 | AA 最低要求 | AAA 增强要求 |
|-----------|------------|--------------|
| 普通文本 (< 18px / < 14px 粗体) | 4.5:1 | 7:1 |
| 大号文本 (≥ 18px / ≥ 14px 粗体) | 3:1 | 4.5:1 |
| UI 组件和图形 | 3:1 | 3:1 |
css
/* ❌ 低对比度 (2.5:1) */
.low-contrast {
color: #999;
background: #fff;
}
/* ✅ 充足对比度 (7:1) */
.high-contrast {
color: #333;
background: #fff;
}
/* ✅ 聚焦
粤公网安备44030002003366号