无障碍听起来像是在服务小众群体，但改版时做这几件事，受益的是所有人：年纪大的客户、在强光下看手机的人、网络差的时候，还有搜索引擎。
而且改版本来就要动全部页面，这时候顺手做成本最低。
对比度先查一遍
浅灰字配白底是设计稿里的常客，看着高级，实际很多人看不清。标准：
- 正文文字对比度不低于 4.5:1
- 大字号（18px 以上）不低于 3:1
- 重点检查：占位符文字、表单说明、页脚信息、禁用状态
浏览器开发者工具里就能查，输入色值直接给出结果。改版评审时把这项列进检查表。
键盘要能走通
有些人不用鼠标。检查这几项：
- Tab 键能否遍历所有可交互元素，顺序是否符合视觉顺序
- 聚焦状态是否可见：很多网站为了美观去掉了默认边框，结果键盘用户完全不知道光标在哪
- 弹窗能否用 Esc 关闭，焦点有没有被困在里面
- 下拉菜单用键盘能否展开和选择
- 有没有键盘陷阱：进入某个组件后出不来
第 2 条最常见。如果必须去掉默认边框，一定要用其他方式提供同样清晰的聚焦指示。
替代文本与标签
- 图片写 alt：客观描述内容，装饰性图片留空
- 纯图标按钮要有文字标签：或者用
aria-label说明用途 - 视频配字幕，有条件加文字稿
- 表单控件和标签要关联：点击文字能聚焦到输入框
- 表格用 th 标出表头
标题层级
一个页面一个 H1，下面是 H2，再往下 H3，别跳级。读屏软件用户靠标题快速跳读，层级乱了他们就没法浏览。
这点对搜索同样重要。搜索引擎也用标题结构理解页面内容组织。
字号与缩放
- 正文不小于 16 像素，行高 1.5 以上
- 使用相对单位：用户调大浏览器默认字号时网站能跟着变
- 不要禁止缩放：移动端模板里的
user-scalable=no要删掉 - 留足够的点击区域：对行动不便的人也友好
动效与闪烁
有些用户会因为动画感到不适，甚至诱发生理反应：
- 减少大幅度的视差和自动播放动画
- 尊重系统的"减少动效"设置
- 轮播图提供暂停按钮，别自动无限循环
- 避免闪烁频率过高的效果
怎么落地
不必一步到位，改版时按这个顺序做：
- 设计阶段：定配色时就检查对比度，定字号时就考虑最小值
- 开发阶段：语义化标签、alt、聚焦样式作为代码规范要求
- 验收阶段：用免费检测工具跑一遍，再手动用键盘走一遍核心流程
长期价值
这些改进不只服务于少数人。对比度提高，所有人都能看清；键盘可用，表单填写更快；alt 写好，图片搜索也能带来流量。改版时花在这上面的成本，会在后面几年持续回报。
无障碍不是额外功能，它是把本来就该产品化的细节做对了。改版是最便宜的补票时机。
—— 一位做过政务网站改造的前端开发