前端可访问性：语义化 HTML 与 ARIA 最佳实践

探讨了前端可访问性的重要性，指出忽略无障碍设计会阻碍部分用户访问。通过对比反面教材与正确示例，介绍了实现可访问性的四个关键步骤：使用语义化 HTML 标签（如 header, main, label）、合理应用 ARIA 属性增强屏幕阅读器支持、确保键盘导航的完整性以及保证颜色对比度符合标准。这些措施能让所有用户平等地使用网站，提升整体体验。

剑仙发布于 2026/4/5更新于 2026/4/131 浏览

前端可访问性：语义化 HTML 与 ARIA 最佳实践

引言

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

前端可访问性至关重要。忽略可访问性就像在公共建筑里不建无障碍通道——能进，但不是所有人都能进。

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

最近看到一些项目存在按钮无焦点状态、表单无标签等问题，导致屏幕阅读器无法正常工作。忽视可访问性会导致用户体验严重下降。

反面教材

// 反面教材：忽略可访问性
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>
      </>
    
  );
}
  ;

相关免费在线工具

Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online
Markdown 转 HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。在线工具，Markdown 转 HTML在线工具，online
HTML 转 Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML 转 Markdown在线工具，online
JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。在线工具，JSON 压缩在线工具，online
JSON美化和格式化
将JSON字符串修饰为友好的可读格式。在线工具，JSON美化和格式化在线工具，online

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

// 正确姿势：使用 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;

// 正确姿势：键盘导航
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;

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

前端可访问性：语义化 HTML 与 ARIA 最佳实践

前端可访问性：语义化 HTML 与 ARIA 最佳实践

引言

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

反面教材

更多推荐文章

相关免费在线工具

正确姿势

1. 语义化 HTML

2. ARIA 标签

3. 键盘导航

4. 颜色对比度

总结

前端可访问性：语义化 HTML 与 ARIA 最佳实践

前端可访问性：语义化 HTML 与 ARIA 最佳实践

引言

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

反面教材

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

正确姿势

1. 语义化 HTML

2. ARIA 标签

3. 键盘导航

4. 颜色对比度

总结