前端可访问性实战：别让网站成为障碍

问题很明显：图片没描述，输入框没关联标签，链接没意义。屏幕阅读器读到这些时，只能发出'图像'、'链接'的噪音，用户根本不知道这是什么。

正确姿势：构建包容性体验

1. 语义化 HTML 是基石

别只用 <div> 堆砌页面。用 <header>, <main>, <nav> 告诉浏览器结构是什么。表单元素必须配合 <label>，这样键盘操作和屏幕阅读器才能知道哪个输入框对应什么字段。

// 正面示例：语义化与标签关联
function App() {
  return (
    <div>
      <header>
        <h1>我的网站</h1>
      </header>
      <main>
        <form>
          <div>
            <label htmlFor="username">用户名</label>
            <input type="text" id="username" aria-label="用户名" />
          </div>
          <div>
            <label htmlFor="password">密码</label>
            <input type="password" id="password" aria-label="密码" />
          </div>
          <button type="submit" aria-label="登录">登录</button>
        </form>
      </main>
      <footer>
        <img src="logo.png" alt="网站 logo" />
        <nav>
          <ul>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </nav>
      </footer>
    </div>
  );
}
export default App;

注意这里给 <input> 加了 id 并让 <label> 指向它，这是最稳妥的做法。

2. 动态内容的 ARIA 管理

对于折叠菜单这类动态组件，光靠 HTML 不够，得用 ARIA 属性告知状态变化。比如展开按钮需要告诉屏幕阅读器当前是展开还是收起。

// 正面示例：ARIA 状态管理
function App() {
  const [expanded, setExpanded] = React.useState(false);
  return (
    <div>
      <button
        aria-expanded={expanded}
        aria-controls="menu"
        onClick={() => setExpanded(!expanded)}
      >
        菜单
      </button>
      <nav aria-hidden={!expanded}>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </div>
  );
}
export default App;

当菜单收起时，aria-hidden 确保屏幕阅读器跳过这部分内容，避免干扰。

3. 键盘导航不能少

很多视障用户或手部不便者完全依赖键盘。如果自定义了交互组件，必须处理 Tab 键和方向键逻辑。

// 正面示例：键盘导航支持
function App() {
  const [focused, setFocused] = React.useState(0);
  const items = ['首页', '关于我们', '联系我们', '服务'];
  
  const handleKeyDown = (e) => {
    if (e.key === 'ArrowRight') {
      setFocused((prev) => (prev + 1) % items.length);
    } else if (e.key === 'ArrowLeft') {
      setFocused((prev) => (prev - 1 + items.length) % items.length);
    }
  };

  return (
    <nav onKeyDown={handleKeyDown} tabIndex={0}>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            <a
              href="#"
              tabIndex={-1}
              style={{
                outline: index === focused ? '2px solid blue' : 'none',
                backgroundColor: index === focused ? '#e0e0e0' : 'transparent'
              }}
              onClick={() => setFocused(index)}
            >
              {item}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}
export default App;

这里通过 tabIndex 控制焦点顺序，并用键盘事件模拟左右切换，确保盲操也能流畅使用。

4. 颜色对比度达标

色弱用户可能看不清低对比度的文字。遵循 WCAG 标准，文本与背景对比度至少达到 4.5:1。

/* styles.css */
body {
  color: #333333; /* 深色文本 */
  background-color: #ffffff; /* 浅色背景 */
}
a {
  color: #0066cc; /* 蓝色链接，对比度高 */
  text-decoration: none;
}
a:hover {
  color: #004499;
  text-decoration: underline;
}
button {
  background-color: #0066cc;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #004499;
}

别为了设计感牺牲可读性，这才是真正的人文关怀。