提到无障碍，很多人第一反应是"我们不需要服务视障用户"。但实际上，无障碍做得好的网站，往往是所有人用起来都更舒服的网站——包括上了年纪的客户、在强光下看手机的人、以及网络不好的时候。
而且它和 SEO 有大量重合：搜索引擎抓取页面的方式，某种程度上就像一个看不见屏幕的用户。
对比度是最容易改的一项
浅灰色文字配白底，看着"高级"，实际很多人根本看不清。正文文字和背景的对比度建议达到 4.5:1 以上，大字号可以放宽到 3:1。
检查方法很简单，浏览器开发者工具里就有对比度检测，或者用在线工具输入两个色值直接看结果。常见的翻车区域是：占位符文字、页脚版权信息、表单下方的说明小字。
别只靠颜色传递信息
表单校验只用红色边框表示出错，对色觉障碍用户等于没有提示。正确做法是颜色加文字：边框变红的同时，下面写一句"手机号格式不正确"。
同样的道理，图表里区分两条数据不要只靠颜色，加上形状或者直接标注。
键盘要能走通全流程
有些用户不用鼠标，全靠 Tab 键和回车操作。检查一下：
- Tab 顺序是否符合视觉顺序，别跳来跳去
- 当前聚焦位置有没有明显边框，很多人为了美观把
outline去掉了，结果键盘用户完全不知道光标在哪 - 弹窗能否用 Esc 关闭，焦点有没有被锁在弹窗里
- 下拉菜单不用鼠标能不能展开
字号和缩放
正文建议不小于 16 像素，行高保持在 1.5 到 1.8 之间。把字号单位用相对值，用户调大浏览器默认字号时，网站能跟着变。
另外别禁止缩放。有些手机端模板里会写 user-scalable=no，这一行会让需要放大看的用户彻底没法操作，删掉它。
给非文本内容准备替代方案
- 图片：写清楚 alt 文本，装饰性图片留空
- 视频：配上字幕，有条件的加文字稿
- 纯图标按钮：加一个看不见的文字标签，或者用
aria-label说明用途 - 表格：用
<th>标出表头，让读屏软件知道每列是什么
标题层级别跳级
H1 是页面主标题，一个页面只该有一个；下面用 H2，再往下用 H3，不要为了字号大小乱用标签。读屏用户经常靠标题快速跳读，层级乱了，他们就没法浏览，搜索引擎对页面结构的理解也会受影响。
从哪开始
不必一次做完。挑一个重点页面，用免费的自动化检测工具跑一遍，它会列出问题清单和严重程度。先把对比度、alt 缺失、标签错误这几类批量修掉，通常一两天就能让分数提升一大截。
无障碍不是额外加的一套功能，它只是把本来就该产品化的细节做对了。
—— 一位做过政务网站改造的前端开发