Web 可访问性最佳实践：确保每位用户平等访问

什么是 Web 可访问性？

Web 可访问性（Web Accessibility）旨在确保网站、工具和技术能被所有人使用，无论其是否存在残疾。这涵盖了视觉障碍（如失明）、听觉障碍（如耳聋）、运动障碍（如无法使用鼠标）以及认知障碍（如学习困难）。作为前端开发者，构建包容性的数字产品不仅是技术任务，更是社会责任。

为什么它很重要？

实现可访问性不仅是道德责任，也是实际需求：

法律合规：许多国家和地区都有相关法规要求。
扩大受众：让更多潜在用户能够访问你的内容。
体验提升：良好的可访问性实践通常能改善所有用户的体验。
SEO 优化：结构良好的网站更容易被搜索引擎理解。

核心最佳实践

1. 语义化 HTML

使用语义化的标签能让屏幕阅读器准确理解页面结构。避免滥用 <div>，改用 <header>, <nav>, <main> 等。

<!-- 推荐写法 -->
<header><h1>网站标题</h1></header>
<nav aria-label="主导航">...</nav>
<main><article>...</article></main>

2. 颜色对比度

确保文本与背景的对比度足够高，便于阅读。WCAG 建议普通文本对比度至少为 4.5:1。

/* 避免低对比度 */
.bad { color: #666; background: #f0f0f0; }

/* 推荐高对比度 */
.good { color: #333; background: #fff; }

3. 图片替代文本

为图片提供 alt 属性，描述图片内容。装饰性图片应设为空字符串。

<img src="logo.png" alt="公司 Logo">

4. 键盘可访问性与焦点样式

确保所有交互功能都可通过键盘操作，并提供清晰的焦点指示器。不要随意移除默认的 outline，除非你提供了自定义样式。

:focus { outline: 2px solid #667eea; outline-offset: 2px; }
button:focus { outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5); }

5. 表单标签关联

使用 <label> 明确关联输入框，提高可用性。

<label for="name">姓名</label>
<input type="text" id="name" placeholder="请输入姓名">

6. ARIA 属性增强

对于动态组件，合理使用 ARIA 属性（如 aria-expanded, aria-controls）来告知辅助技术状态变化。

<button aria-expanded="false" aria-controls="menu">菜单</button>
<ul id="menu" hidden>...</ul>

7. 跳过导航链接

为键盘用户提供'跳过导航'的快捷方式，直接进入主要内容区域。

<a href="#main-content" class="skip-link">跳过导航</a>
<style>
  .skip-link { position: absolute; top: -40px; left: 0; z-index: 100; }
  .skip-link:focus { top: 0; }
</style>

8. 标题层级逻辑

保持标题层级顺序（h1 -> h2 -> h3），不要跳跃，帮助屏幕阅读器构建文档大纲。

9. 多媒体字幕

视频和音频内容必须提供字幕或文字稿。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="zh" label="中文">
</video>

10. 响应式设计

确保在不同设备上布局合理，字体大小适中，触控区域足够大。

测试工具推荐

Lighthouse: Chrome DevTools 内置，选择 Accessibility 面板生成报告。
axe DevTools: 浏览器扩展，专门用于检测可访问性问题。
WAVE: 在线工具，输入网址即可分析页面问题。

实战案例

可访问的导航菜单

结合 ARIA 属性和 JavaScript 控制展开状态，确保焦点管理正确。

<nav aria-label="主导航">
  <button aria-expanded="false" aria-controls="menu">菜单</button>
  <ul id="menu" hidden>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>
<script>
  const btn = document.querySelector('button');
  const menu = document.getElementById('menu');
  btn.addEventListener('click', () => {
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', !expanded);
    menu.hidden = expanded;
  });
</script>

可访问的模态框

模态框打开时锁定焦点，关闭时恢复焦点，并支持 ESC 键退出。

<button id="modal-toggle">打开模态框</button>
<div id="modal" aria-hidden="true" role="dialog" aria-labelledby="modal-title">
  <h2 id="modal-title">模态框标题</h2>
  <button id="modal-close">关闭</button>
</div>
<script>
  const modal = document.getElementById('modal');
  const toggle = document.getElementById('modal-toggle');
  const close = document.getElementById('modal-close');
  
  toggle.addEventListener('click', () => {
    modal.setAttribute('aria-hidden', 'false');
    close.focus();
  });
  
  close.addEventListener('click', () => {
    modal.setAttribute('aria-hidden', 'true');
    toggle.focus();
  });
  
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') {
      modal.setAttribute('aria-hidden', 'true');
      toggle.focus();
    }
  });
</script>

结语

Web 可访问性是前端开发的重要责任。通过遵循上述实践，我们不仅能满足合规要求，更能体现技术的包容性，让数字世界对每个人更加友好。