网页无障碍 (a11y) 基础入门：让所有人都能访问您的网站

1. 什么是网页无障碍？

网页无障碍（简称 a11y，来自 "accessibility" 中间有 11 个字母）是指设计和开发网站，使所有人都能使用，无论他们是否有身体或认知障碍。

无障碍设计面向的用户群体包括：

• 视觉障碍用户 — 使用屏幕阅读器（Screen Reader）来听取网页内容
• 听力障碍用户 — 需要视频/音频的字幕或文字记录
• 运动障碍用户 — 使用键盘或辅助设备代替鼠标进行操作
• 认知或学习障碍用户 — 需要清晰简单的内容和一致的布局
• 色盲用户 — 需要足够的色彩对比度和非颜色视觉提示

2. 为什么无障碍如此重要

无障碍不只是"做好事"——它有明确的商业和技术价值：

3. WCAG 2.2 国际标准

WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是 W3C 发布的网页无障碍国际标准。当前版本为 2.2，于 2023 年 10 月发布。

三个合规级别

4. POUR 四大原则

WCAG 围绕四个核心原则组织，称为 POUR：

P — 可感知（Perceivable）

所有内容必须能以用户可感知的方式呈现。例如：

• 图片必须有 alt 属性描述其含义
• 视频必须有字幕或文字记录
• 内容不能仅依靠颜色传达信息

O — 可操作（Operable）

所有功能必须可通过任何输入方式操作。例如：

• 所有交互元素必须支持键盘访问
• 内容闪烁频率不超过每秒 3 次（避免诱发癫痫）
• 提供"跳至主要内容"链接，方便键盘用户

U — 可理解（Understandable）

内容和功能必须易于理解。例如：

• 在 <html> 标签上用 lang 属性声明页面语言
• 表单错误必须清楚描述并提供修正建议
• 所有页面的导航结构保持一致

R — 健壮性（Robust）

内容必须能与当前及未来的辅助技术可靠配合。例如：

• HTML 必须符合规范——标签正确开闭
• 正确且适度地使用 ARIA 属性
• 避免使用屏幕阅读器不支持的废弃 HTML 元素

5. 最常见的无障碍问题

WebAIM 2024 年百万网站报告分析了 100 万个网站，发现以下 6 大常见问题：

6. 视觉障碍用户的无障碍设计

视觉障碍用户依赖屏幕阅读器——将网页内容大声朗读的软件。常见工具有 NVDA、JAWS（Windows）、VoiceOver（macOS/iOS）和 TalkBack（Android）。

编写有效的 Alt 文本

• 有意义的图片：描述图片传达的信息，而非仅描述外观
• 装饰性图片：使用 alt="" 让屏幕阅读器跳过
• 含文字的图片：Alt 文本中必须包含该文字内容

<!-- ✅ 正确 -->
<img src="graph.jpg" alt="2026年1-6月销售额折线图，增长35%">

<!-- ❌ 错误 -->
<img src="graph.jpg" alt="图表">
<img src="banner.jpg"> <!-- 完全缺少 alt 属性 -->

色彩对比度要求

• AA 级：普通文本 ≥ 4.5:1 · 大文本（≥18pt 或 ≥14pt 粗体）≥ 3:1
• AAA 级：普通文本 ≥ 7:1 · 大文本 ≥ 4.5:1

7. 键盘导航与焦点管理

运动障碍用户通常完全依靠键盘操作网站。您网站上的每个交互元素都必须仅通过键盘即可访问和操作。

基本键盘快捷键

• Tab — 向前移动焦点
• Shift + Tab — 向后移动焦点
• Enter / Space — 激活按钮/链接
• 方向键 — 在菜单、下拉框、滑块中导航
• Esc — 关闭对话框和下拉菜单

可见的焦点指示器

WCAG 2.2 要求聚焦元素必须有清晰可见的指示器。切勿在没有替代方案的情况下移除焦点样式：

/* ❌ 不要这样做 */
*:focus { outline: none; }

/* ✅ 改为这样 */
*:focus-visible {
  outline: 3px solid #059669;
  outline-offset: 2px;
}

8. 语义化 HTML 与 ARIA 属性

语义化 HTML 是指使用具有内在含义的 HTML 元素，而非用 <div> 和 <span> 实现一切。屏幕阅读器能正确识别和朗读语义化元素。

ARIA 属性

ARIA（Accessible Rich Internet Applications）提供额外属性，向辅助技术传达角色、状态和属性信息。仅在语义化 HTML 不够用时使用：

<!-- 描述图标按钮的功能 -->
<button aria-label="关闭对话框">✕</button>

<!-- 指示展开/折叠状态 -->
<button aria-expanded="false" aria-controls="dropdown">菜单</button>

<!-- 动态提醒区域 -->
<div role="alert" aria-live="assertive">错误：请重试。</div>

9. 免费无障碍测试工具

10. 总结与入门步骤

11. 常见问题解答