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

正确做法：从结构到交互

真正的无障碍需要从语义化 HTML 开始，配合 CSS 和 JavaScript 增强交互。

1. 语义化与基础属性 使用正确的标签代替 div soup，并为媒体资源提供替代文本。

<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">

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

2. 键盘导航与焦点管理 屏幕阅读器用户和习惯键盘操作的人依赖 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;
}

3. 动态内容与通知 当页面内容发生变化时（如表单提交成功），需要通知辅助技术。

// 监听键盘事件，处理焦点逻辑
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 updateStatus(message) {
  const statusElement = document.getElementById('status-message');
  if (statusElement) {
    statusElement.textContent = message;
  }
}

核心要点总结

无障碍性不是额外的工作，而是融入日常开发的习惯。记住以下几点：

• 语义化 HTML：正确使用 header, nav, main 等标签。
• Alt 标签：为所有图片添加有意义的描述。
• 颜色对比：确保文本和背景对比度足够高。
• 键盘导航：确保所有功能可通过键盘访问。
• ARIA 属性：合理使用角色和属性增强可访问性。
• 焦点管理：确保焦点可见且位置正确。
• 跳过导航：提供跳过重复内容的链接。
• 表单关联：确保输入框与标签正确绑定。
• 动态通知：使用 aria-live 区域通知变化。
• 测试验证：务必使用屏幕阅读器或工具进行测试。

做好无障碍性，你的网站才能真正服务于所有人。