无障碍不只是“照顾少数人”

无障碍（Accessibility，常写成 A11y——A 和 y 之间有 11 个字母）指让所有用户，包括视障、听障、运动障碍、认知障碍，以及临时受限的人（单手骑车、强光下看手机），都能使用你的网站。它不是锦上添花，很多地区已纳入法规，做不好会被投诉甚至诉讼。

更实际的好处是：无障碍做好了，SEO 也会更好、键盘党和语音助手也能用、代码往往更干净。读屏软件靠页面语义朗读内容，如果你的按钮是个不能点的 div，视障用户根本不知道这能按。

本文核心知识点
  • 语义化用 button、nav、main 等原生标签，自带无障碍能力。
  • 键盘所有操作都能只用 Tab 完成，焦点可见。
  • alt每张有意义的图都要描述，装饰图留空。
  • 对比文字与背景对比度达标，照顾弱视觉。
Web 无障碍配图：蓝色渐变背景中央一个浏览器窗口轮廓，四周环绕抽象的眼睛、耳朵、手的扁平剪影形状，发光路径连接到窗口，扁平科技插画
浏览器周围环绕眼、耳、手的剪影，代表多通道、多方式的可访问体验。

语义化 HTML 是地基

最好的无障碍是直接用对标签。一个 <button> 天生就能被 Tab 聚焦、天生响应回车空格、读屏会念“按钮”；而你用 <div onclick> 手写的“按钮”，这些全都没有，还得自己补。同理：导航用 <nav>、主要内容用 <main>、标题用 <h1>~<h6>，读屏软件就能告诉用户“这是导航”“这是正文”“这是第几个标题”。

// 反面：可点击的 div，键盘和读屏都不知道它是按钮
<div onclick="save()">保存</div>

// 正面：原生 button，自带无障碍
<button type="button" onclick="save()">保存</button>

本站页首的“跳至主要内容”链接（skip-link）就是典型：键盘用户按一次 Tab 就能跳过导航直达正文，不用每个页面重复按几十次。

键盘可达与焦点

很多用户不用鼠标，全靠键盘。验收标准很简单：打开页面，拔掉鼠标，只用 Tab 键能不能走完所有关键操作？能聚焦、能看到当前焦点在哪、回车能激活。

常见坑：为了好看把 :focus 的轮廓（outline）去掉却没补替代焦点样式——键盘用户就完全不知道自己卡在哪。下拉菜单、弹窗、模态框这类组件还要做焦点圈禁（focus trap）：打开弹窗时焦点锁在弹窗里，关闭后回到触发按钮，别让焦点跑到背后页面。

图片 alt 与表单标签

图片：有意义的图必须写 alt，描述它传达的信息（不是“图1”）；纯粹装饰的图 alt="" 留空，读屏就跳过它。表单：每个输入框都要有 <label> 关联，别只放个占位符（placeholder）当标签——读屏不知道这框是填什么的。

<label for="email">邮箱地址</label>
<input id="email" name="email" type="email">

<!-- 装饰图，alt 留空 -->
<img src="divider.png" alt="">

按钮如果只放个图标（如叉号关闭），要用 aria-label="关闭" 补上名称，让读屏念出来。

色彩对比与减少动态

弱视觉和强光下看不清的人很多。正文文字与背景对比度至少 4.5:1，大字可放宽到 3:1。别用“颜色”作为唯一的信息传达方式（如“红色代表错误、绿色代表成功”），色盲用户分不出，要配图标或文字。

动态方面：为可能引发前庭不适的用户，尊重 prefers-reduced-motion——系统开了“减少动态”，你的大段动画就该降级为简洁过渡。闪烁频率也要控制，避免诱发癫痫。