网页无障碍（a11y）指南：让网站对所有人可用

网页无障碍（Accessibility，简称 a11y）确保无论用户是否有视觉、听觉、运动或认知障碍，都能正常访问和使用你的网站。

WCAG 标准概述

WCAG（Web Content Accessibility Guidelines）是国际公认的网页无障碍标准，分为三个等级：

等级 要求 目标
A 最低 必须满足，否则部分用户无法访问
AA 中等 大多数网站应达到的标准
AAA 最高 特定场景下的最高标准

10 个关键无障碍实践

1. 为图片添加替代文本

<!-- 好的做法 -->
<img src="chart.png" alt="2026 年各季度销售额增长趋势图">

<!-- 装饰性图片 -->
<img src="decoration.png" alt="" role="presentation">

2. 使用语义化 HTML

<!-- 不好的做法 -->
<div class="nav">...</div>
<div class="main">...</div>

<!-- 好的做法 -->
<nav>...</nav>
<main>...</main>

3. 确保足够的颜色对比度

  • 普通文本：对比度 ≥ 4.5:1（AA）/ ≥ 7:1（AAA）
  • 大文本（≥18px 粗体或 ≥24px）：对比度 ≥ 3:1
  • 使用 WebAIM Contrast Checker 测试

4. 支持键盘导航

/* 为焦点状态提供可见指示 */
:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}

5. 添加表单标签

<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" required>

<!-- 或使用 aria-label -->
<input type="search" aria-label="搜索文章">

6. 管理焦点顺序

确保 Tab 键导航顺序与视觉顺序一致。避免使用正数的 tabindex。

7. 添加跳过导航链接

<!-- 页面第一个可聚焦元素 -->
<a href="#main" class="skip-link">跳到主要内容</a>

8. 使用 ARIA 属性

<div role="alert" aria-live="polite">
  表单提交成功
</div>

<button aria-expanded="false" aria-controls="menu">
  菜单
</button>

9. 确保文本可缩放

使用相对单位（rem/em）而非固定单位（px）设置字体大小。

10. 提供清晰的错误提示

<div role="alert">
  <ul>
    <li>邮箱地址格式不正确</li>
    <li>密码至少需要 8 个字符</li>
  </ul>
</div>

测试工具

工具 类型 用途
axe DevTools 浏览器扩展 自动扫描无障碍问题
Lighthouse Chrome DevTools 生成无障碍审计报告
WAVE 浏览器扩展 可视化展示无障碍问题
NVDA/JAWS 屏幕阅读器 模拟视障用户访问
Colour Contrast Analyser 桌面应用 测试颜色对比度

16IDC 观察

网页无障碍不是「可选增强」，而是体现网站质量的重要维度。从项目开始就将无障碍纳入开发流程，比后期修复要省力得多。关注无障碍不仅扩大了你的潜在用户群，还能提升整体代码质量和 SEO 表现。