Web 无障碍最佳实践：从可访问性树到实战代码

4.1 管理 tabindex

• tabindex="0"：元素可聚焦，且按 DOM 顺序参与 Tab 导航。
• tabindex="-1"：元素可聚焦，但只能通过 JavaScript 聚焦（用于程序化焦点管理）。
• 避免使用 tabindex 大于 0 的值，它会打乱自然顺序。

4.2 跳过导航链接

为键盘用户提供“跳到主内容”的链接：

<a href="#main-content" class="skip-link">跳到主内容</a>
<!-- 其他导航 -->
<main id="main-content">...</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

5. 颜色对比度与视觉设计

WCAG 2.1 AA 要求正常文本对比度至少 4.5:1，大文本（18pt 或 14pt 粗体）至少 3:1。使用工具如 WebAIM Contrast Checker 验证。

/* 不好的例子：对比度不足 */
.low-contrast {
  color: #999;
  background: #fff; /* 对比度约 2.8:1 */
}

/* 好的例子 */
.good-contrast {
  color: #333;
  background: #fff; /* 对比度约 12.6:1 */
}

💡 注意：不要仅靠颜色传达信息（如红色表示错误）。应同时使用图标或文本。

6. 表单无障碍：标签、错误提示与分组

6.1 显式关联标签

<label for="username">用户名</label>
<input type="text" id="username" name="username" aria-required="true">

6.2 错误提示

<label for="email">邮箱</label>
<input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
<span id="email-error" role="alert">请输入有效的邮箱地址</span>

role="alert" 会立即通知屏幕阅读器。

6.3 字段集分组

<fieldset>
  <legend>选择你的兴趣</legend>
  <input type="checkbox" id="coding" name="interest" value="coding">
  <label for="coding">编程</label>
  <input type="checkbox" id="design" name="interest" value="design">
  <label for="design">设计</label>
</fieldset>

7. 动态内容与 ARIA Live Regions

当页面内容动态更新（如搜索结果、通知），使用 aria-live 让屏幕阅读器播报。

<div aria-live="polite" id="status"></div>
<script>
  // 几秒后更新
  setTimeout(() => {
    document.getElementById('status').textContent = '已保存 3 条记录';
  }, 2000);
</script>

• polite：等待用户空闲时播报。
• assertive：立即打断播报（用于紧急错误）。

8. 测试你的无障碍实现

8.1 自动化工具

• axe DevTools：浏览器扩展，快速扫描问题。
• Lighthouse：Chrome 内置，生成无障碍报告。
• Pa11y：命令行工具，可集成 CI。

8.2 手动测试

• 仅用键盘操作：Tab、Shift+Tab、Enter、Space、方向键。
• 使用屏幕阅读器：NVDA（Windows）、VoiceOver（Mac）、Orca（Linux）。
• 放大到 200% 检查布局。

8.3 在 CI 中加入无障碍测试

// package.json
{
  "scripts": {
    "test:a11y": "pa11y-ci --sitemap https://example.com/sitemap.xml"
  }
}

9. 常见坑与最佳实践总结

• 不要用 ARIA 修复语义化 HTML 的问题：优先使用原生元素。
• 不要隐藏焦点轮廓：除非提供替代样式。
• 不要滥用 aria-hidden：它会隐藏内容，但可能让可聚焦元素不可见。
• 确保所有功能可通过键盘访问。
• 提供足够的颜色对比度。
• 为图片提供 alt 文本：装饰性图片用 alt=""。
• 测试、测试、再测试：自动化 + 手动。

10. 延伸阅读