前端无障碍性：构建包容性网站

正确的做法

<!-- 正确的做法：使用语义化 HTML --> 
<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>
<!-- 正确的做法：添加 alt 标签 --> 
<img src="logo.png" alt="网站 logo">
<!-- 正确的做法：足够的颜色对比 --> 
<div>这段文字很容易阅读</div>
<!-- 正确的做法：键盘可访问 --> 
<button onclick="doSomething()" tabindex="0">点击我</button>
<!-- 正确的做法：添加 ARIA 属性 --> 
<div role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <div>
    <h2>弹窗标题</h2>
    <p>弹窗内容</p>
  </div>
</div>
<!-- 正确的做法：使用 ARIA live region --> 
<div aria-live="polite"></div>
<script>
// 正确的做法：键盘导航
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}"]`);
      if (label) {
        
      }
    }
  });
}

 () {
   statusElement = .();
  statusElement. = message;
}
</script>
<style>
/* 正确的做法：焦点样式 */
*: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;
}
/* 正确的做法：键盘导航样式 */
.keyboard-navigation *:focus {
  /* 更明显的焦点样式 */
}
</style>

核心观点

看看，这才叫前端无障碍性！不是简单地加几个 alt 标签，而是从语义化 HTML、键盘导航、ARIA 属性等多个方面入手。

记住，无障碍性不是额外的工作，而是前端开发的基本要求。一个真正优秀的前端开发者，会把无障碍性融入到日常开发中。

所以，别再觉得无障碍性不重要了，它是你作为开发者的责任！

总结

• 语义化 HTML：使用正确的 HTML 标签，如 header、nav、main、section 等
• alt 标签：为所有图片添加有意义的 alt 属性
• 颜色对比：确保文本和背景的对比度足够高
• 键盘导航：确保所有功能都可以通过键盘访问
• ARIA 属性：使用 ARIA 角色和属性增强可访问性
• 焦点管理：确保焦点在正确的元素上，并有明显的焦点样式
• 跳过导航：为屏幕阅读器用户提供跳过重复内容的链接
• 表单标签：确保所有表单元素都有关联的标签
• 动态内容：使用 ARIA live region 通知屏幕阅读器动态内容的变化
• 测试：使用屏幕阅读器和无障碍性测试工具进行测试

无障碍性，让你的网站对所有人都友好！