前端可访问性开发指南

前端可访问性开发指南

引言

这网站做的跟迷宫似的，正常人都找不到路，更别说有障碍的人了。

各位前端开发者，今天聊聊前端可访问性。别忽略可访问性，那感觉就像在公共建筑里不建无障碍通道——能进，但不是所有人都能进。

为什么你需要关注可访问性

最近看到一个项目，按钮没有焦点状态，表单没有标签，屏幕阅读器根本无法正常工作。这会让网站变成难以使用的迷宫。

反面教材

// 反面教材：忽略可访问性
function App() {
  return (
    <div>
      <h1>我的网站</h1>
      <div>
        <input type="text" placeholder="用户名" />
        <input type="password" placeholder="密码" />
        <button>登录</button>
      </div>
      <div>
        <img src="logo.png" />
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
    </div>
  );
}
export default App;

代码分析：这段代码缺乏必要的结构支持，屏幕阅读器无法识别输入框和按钮的用途。

正确姿势

1. 语义化 HTML

// 正确姿势：语义化 HTML
function App() {
  return (
    <div>
      <header>
        <h1>我的网站</h1>
      </header>
      <main>
        <form>
          <div>
            <label htmlFor="username">用户名</label>
            <input type="text" aria-label="用户名" />
          </div>
          <div>
            <label htmlFor="password">密码</label>
            <input type="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;

2. 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;

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;

4. 颜色对比度

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

总结：这才是符合标准的可访问性实现，让所有人都能平等地使用你的网站。