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

这段代码的问题在于，它只考虑了视觉呈现。对于依赖键盘或屏幕阅读器的用户来说，这就是黑暗中的摸索。

正确姿势

语义化 HTML

结构决定命运。用正确的标签告诉浏览器和辅助技术你在做什么。

// 正确姿势：语义化 HTML
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;

注意 label 的 htmlFor 和 input 的 id 对应关系，这是基础中的基础。

ARIA 标签

当原生元素不够用时，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-expanded 和 aria-controls 把交互状态同步给了辅助技术。

键盘导航

很多用户只用键盘操作，别让他们卡住。

// 正确姿势：键盘导航
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 的设置，确保逻辑顺序符合视觉顺序。

颜色对比度

文字看不清，再好的功能也没用。

/* 正确姿势：颜色对比度 */
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;
}

遵循 WCAG 标准，保证对比度至少达到 4.5:1。这才叫真正的平等使用。

写在最后

可访问性不是负担，它是产品成熟度的体现。花点时间把这些细节做好，你的网站会感谢你的。