网页与前端 · 综合

无障碍:不能跳过的最低限度

一句话: 无障碍的大部分来自写出正确的HTML,而大部分失败来自把标准元素换成了「画得像它」的东西。

四件事覆盖大部分

正确的元素。按钮就是按钮,链接就是链接,标题按层级递减。带点击处理的div既不能用键盘访问,屏幕阅读器也不会朗读它。

对比度和尺寸。白底浅灰字是最常见的问题,改一个颜色变量就能解决。

键盘。只用Tab把整个流程走一遍。如果关不掉弹窗或者够不到某个按钮,那就是阻塞。

替代文本和带标签的表单。每张有意义的图片一段描述,每个字段一个关联的标签。

查什么、怎么查

自动化工具能抓到大约三分之一的问题,值得在每次构建时都跑。剩下的靠两次简短的手工检查:走一遍键盘,以及让屏幕阅读器朗读一个核心页面。

手工检查每页十五分钟,能发现任何工具都看不到的东西——比如Tab顺序在几个区域之间乱跳。

为什么在商业上也划算

同样这些修复,会改善手机上、阳光下和弱网时的使用体验。而且在很多地方,网站无障碍还是法规要求——值得找有资质的人确认一下你的情况。

深入一层

把基础组件——按钮、输入框、对话框、菜单——做一次,带上正确的焦点管理和角色,然后不允许在每个页面里重写。无障碍是在系统层面达成的,不是在单点修复上达成的。