前端无障碍性开发指南：构建包容性 Web 体验

这些代码在屏幕阅读器下可能完全不可读，或者键盘用户无法操作。

最佳实践：如何正确实现

1. 语义化 HTML 基础

使用 <header>, <nav>, <main> 等标签能让辅助技术快速理解页面结构。

<header>
  <h1>网站 logo</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>

2. 图片与媒体资源

所有非装饰性图片必须包含有意义的 alt 属性。

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

3. 键盘导航与焦点管理

确保所有交互元素都能通过 Tab 键访问，并给出明显的视觉反馈。

/* 明显的焦点样式 */
*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 跳过导航链接样式 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0066cc;
  color: white;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

4. ARIA 属性增强

对于动态内容或复杂组件，合理使用 ARIA 角色和状态。

<!-- 弹窗示例 -->
<div role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <h2 id="modal-title">弹窗标题</h2>
  <p>弹窗内容</p>
</div>

<!-- 动态通知区域 -->
<div aria-live="polite" id="status-message"></div>

5. JavaScript 辅助逻辑

虽然 HTML 是基础，但 JS 可以处理更复杂的焦点管理和动态更新。

// 监听键盘事件，处理焦点可见性
document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
    document.body.classList.add('keyboard-navigation');
  }
});

// 创建跳过导航链接
function createSkipLink() {
  const skipLink = document.createElement('a');
  skipLink.href = '#main-content';
  skipLink.className = 'skip-link';
  skipLink.textContent = '跳过导航';
  document.body.insertBefore(skipLink, document.body.firstChild);
}

// 表单标签关联检查
function associateLabels() {
  const inputs = document.querySelectorAll('input');
  inputs.forEach(input => {
    if (input.id) {
      const label = document.querySelector(`label[for="${input.id}"]`);
      // 确保 label 存在且关联正确
    }
  });
}

// 动态内容状态更新
function updateStatus(message) {
  const statusElement = document.getElementById('status-message');
  if (statusElement) {
    statusElement.textContent = message;
  }
}

核心要点总结

做好无障碍性不需要额外的大工程，而是融入日常开发的习惯：

1. 语义化标签：优先使用原生 HTML 元素。
2. 替代文本：为图片、图标提供准确的 alt 描述。
3. 色彩对比：保证文本与背景的对比度符合 WCAG 标准。
4. 键盘可达：所有功能需支持键盘操作，避免鼠标依赖。
5. 焦点管理：提供清晰的焦点指示器，必要时实现'跳过导航'。
6. ARIA 应用：仅在原生 HTML 无法满足时补充 ARIA 属性。
7. 测试验证：结合屏幕阅读器（如 NVDA/VoiceOver）和自动化工具进行测试。

无障碍性是前端开发者的基本责任，而非锦上添花。只有当所有人都能顺畅使用你的产品时，技术才真正实现了价值。