前端可访问性（a11y）实战指南

可访问性（Accessibility，简称 a11y）常被忽视，却关乎真实用户的体验。本文给出可落地的实战清单。

为什么值得做

• 合规：多国法规要求网站具备可访问性；
• 包容：视力、运动、认知障碍的用户也应有完整体验；
• 共赢：语义化、键盘友好的页面，对 SEO 和所有用户都更友好。

语义化 HTML：a11y 的地基

正确使用语义标签，比任何 ARIA 都重要：

• 用 <button> 而非 div 实现按钮；
• 用 <nav>、<main>、<article> 标注结构；
• 图片必须提供有意义的 alt（装饰图留空 alt=""）。

键盘可访问性

所有交互都应能只用键盘完成：

• 焦点可见且顺序合理；
• 自定义组件要处理 Tab、Enter、方向键；
• 避免键盘陷阱（焦点进入后出不来）。

合理使用 ARIA

ARIA 是在 HTML 语义不足时「补充」信息，而非替代语义：

<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">标题</h2>
</div>

原则：能不用 ARIA 就不用，先检查是否有原生语义可用。

实用检查清单

1. 页面是否只有一个 <h1>，标题层级是否合理？
2. 色彩对比度是否达标（正文至少 4.5:1）？
3. 表单是否有 <label> 关联？
4. 是否尊重 prefers-reduced-motion？

结语

可访问性不是「最后再补」的加分项，而是从一开始就融入的基本功。把清单纳入代码审查，让 a11y 成为团队的默认习惯。