前端可访问性：构建包容性的 Web 体验

这段代码的问题在于：图片没有 alt 文本，输入框没有关联的 <label>，且缺乏明确的页面结构。屏幕阅读器读到这些元素时，无法理解其用途。

正确实践指南

1. 语义化 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;

注意这里给图片添加了 alt，表单控件绑定了 label，并使用 header、main、footer 划分区域。

2. 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 关联控制目标。

3. 键盘导航支持

很多用户无法使用鼠标，必须确保键盘可达。

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;

这里通过监听 keydown 事件实现了左右键切换焦点，并配合 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;
}

不要为了美观牺牲可读性。深色文字配浅色背景是最稳妥的选择。

做好这些细节，你的网站才能真正服务于所有人。