
键盘能不能走通全流程
检查无障碍最直接的方式是拔掉鼠标,只用键盘完成一次核心流程。如果中途卡住,说明存在键盘不可达的环节,这通常会影响的不只是键盘用户,还有临时用外接键盘、或者操作精确度受限的人。
焦点顺序要跟视觉顺序一致。页面上从左到右、从上到下的阅读顺序,与按下 Tab 键时的跳转顺序应该吻合,否则用户会来回跳跃,很容易失去位置感。
聚焦样式必须可见。很多项目为了美观把默认描边去掉,却没有补上替代样式,结果用户完全不知道自己当前停在哪个元素上。补一个清晰但不刺眼的聚焦样式,是最低要求。
弹窗打开后要把焦点移入并限制在弹窗内部,关闭后回到触发它的元素。这两步不做,键盘用户会跑到弹窗背后的页面上去。
对比度达到什么程度
正文文字与背景的对比要足够高,浅灰文字配白底是最常见的踩坑点,看起来精致,实际在户外或亮度不足的屏幕上几乎读不清。正文尽量保持较高的对比,辅助文字也不能低到难以辨认。
不要只靠颜色传递状态。审核中与已通过如果只用绿色和黄色区分,色觉异常的用户无法分辨,同时灰度打印或截图也会失真。加一个图标或文字标签,成本很低。
输入框的边框、必填标记、错误提示同样需要足够的对比。错误状态只把边框变成浅红,往往不够明显,配合文字说明才可靠。字号和行高也影响可读性。正文过小或行距过密时,视力不佳的用户会直接放弃阅读,这一点在数据密集的表格里尤其明显。
语义标签与替代文本
标题层级要按顺序使用,不要因为字号需要就跳级。屏幕阅读器依靠层级理解页面结构,层级混乱会让导航变得很困难。一个页面通常只有一个一级标题。
可点击的元素要用真正可点击的标签,而不是给普通容器绑点击事件。后者在键盘和屏幕阅读器里都不会被识别为可操作元素,用户根本找不到它。
图片的替代文本要写它传达的信息。纯装饰性图片留空即可,让阅读器跳过;承载信息的图片则要说明内容。
视频和音频内容同样需要替代方案。自动播放的动效要能被暂停,否则对注意力敏感的用户会构成干扰,页面也会更难使用。图标按钮必须带上文字说明或可访问名称,否则读出来只有按钮两个字,用户无从判断。装饰性的图标则应该对辅助技术隐藏,反复朗读没有意义的图形名称同样是干扰。
表单与动态内容
表单的标签要与输入框正确关联,点击标签能聚焦到对应输入框。错误提示不仅要显示,还要让辅助技术能感知到,用户才会知道提交失败以及失败在哪里。
动态更新的内容,比如筛选结果数量、提交成功的提示,要用适当的方式播报,否则依赖阅读器的用户看不到任何变化。
这些改动大多不涉及视觉设计,工作量集中在开发习惯上。把它们写进交付验收清单,比事后专门整改更省力。


