前端无障碍性：构建包容性的 Web 体验

正确实践：从语义化到交互细节

1. 语义化 HTML 与图片描述

使用正确的标签定义页面结构，并为所有非装饰性图片添加有意义的 alt 属性。

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

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

2. 键盘导航与焦点管理

确保所有功能都可以通过键盘操作，并为用户提供清晰的焦点样式。跳过导航链接能让屏幕阅读器用户快速定位主要内容。

// 监听键盘事件，优化焦点状态
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);
}

3. ARIA 属性与动态通知

对于复杂的组件（如弹窗）或动态变化的内容，需配合 ARIA 角色和 Live Region 进行通知。

<!-- 弹窗结构 -->
<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>
<script>
  function updateStatus(message) {
    const statusElement = document.getElementById('status-message');
    statusElement.textContent = message;
  }
</script>

4. CSS 样式增强

为焦点元素提供明显的视觉反馈，并确保跳过链接在获得焦点时可见。

/* 全局焦点样式 */
*: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;
}

核心总结

无障碍性不是额外的工作，而是前端开发的基本要求。一个真正优秀的开发者，会将这些原则融入日常编码习惯中。

• 语义化 HTML：正确使用 header、nav、main 等标签。
• 图片描述：为所有图片添加有意义的 alt 属性。
• 颜色对比：确保文本和背景对比度符合 WCAG 标准。
• 键盘支持：确保所有交互均可通过键盘完成。
• ARIA 增强：合理使用角色和属性辅助屏幕阅读器。
• 焦点管理：保持焦点清晰且可控。
• 跳过导航：提供快捷入口减少重复操作。
• 表单关联：确保 input 与 label 正确绑定。
• 动态通知：利用 aria-live 告知内容变化。
• 测试验证：结合屏幕阅读器与自动化工具进行测试。

让网站对所有人都友好，这是技术人员的责任，也是产品价值的体现。