网页与前端 · 综合
无障碍:不能跳过的最低限度
一句话: 无障碍的大部分来自写出正确的HTML,而大部分失败来自把标准元素换成了「画得像它」的东西。
四件事覆盖大部分
正确的元素。按钮就是按钮,链接就是链接,标题按层级递减。带点击处理的div既不能用键盘访问,屏幕阅读器也不会朗读它。
对比度和尺寸。白底浅灰字是最常见的问题,改一个颜色变量就能解决。
键盘。只用Tab把整个流程走一遍。如果关不掉弹窗或者够不到某个按钮,那就是阻塞。
替代文本和带标签的表单。每张有意义的图片一段描述,每个字段一个关联的标签。
查什么、怎么查
自动化工具能抓到大约三分之一的问题,值得在每次构建时都跑。剩下的靠两次简短的手工检查:走一遍键盘,以及让屏幕阅读器朗读一个核心页面。
手工检查每页十五分钟,能发现任何工具都看不到的东西——比如Tab顺序在几个区域之间乱跳。
为什么在商业上也划算
同样这些修复,会改善手机上、阳光下和弱网时的使用体验。而且在很多地方,网站无障碍还是法规要求——值得找有资质的人确认一下你的情况。
深入一层
把基础组件——按钮、输入框、对话框、菜单——做一次,带上正确的焦点管理和角色,然后不允许在每个页面里重写。无障碍是在系统层面达成的,不是在单点修复上达成的。