Web 无障碍开发入门指南

什么是 Web 无障碍？

Web 无障碍（Accessibility，简称 a11y）确保所有人都能使用你的网站，包括残障人士。

核心原则

1. 语义化 HTML

<!-- ❌ 不好的做法 -->
<div class="button" onclick="submit()">提交</div>

<!-- ✅ 好的做法 -->
<button type="submit">提交</button>

2. 正确的标题层级

<!-- ✅ 正确的标题层级 -->
<h1>网站标题</h1>
  <h2>主要内容区域</h2>
    <h3>子区域标题</h3>
  <h2>侧边栏</h2>

3. 图片 Alt 文本

<!-- 装饰性图片 -->
<img src="decoration.jpg" alt="" role="presentation" />

<!-- 信息性图片 -->
<img src="chart.png" alt="2024年各季度销售额柱状图" />

ARIA 属性

<button
  aria-expanded="false"
  aria-controls="menu"
  aria-label="打开导航菜单"
  onClick="toggleMenu()"
>
  <span class="hamburger-icon"></span>
</button>

<nav id="menu" role="navigation" aria-hidden="true">
  <!-- 菜单内容 -->
</nav>

键盘导航

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleKeyDown = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case 'Escape':
        setIsOpen(false);
        break;
      case 'ArrowDown':
        // 移动到下一个选项
        break;
    }
  };
  
  return (
    <div onKeyDown={handleKeyDown}>
      {/* 下拉菜单 */}
    </div>
  );
}

检测工具

• axe DevTools：浏览器扩展
• Lighthouse：自动审计
• 屏幕阅读器：NVDA, VoiceOver

总结

无障碍不是可选功能，而是每个开发者的责任。从今天开始，让我们的 Web 更加包容。