朋友的父亲想在手机上查社区医院信息,把字体调到最大还是看不清验证码,红绿色的按钮提示他也分不出状态。他后来自己戴着老花镜在手机上试了一遍自家网站,回来直接立项改版。这类用户不在少数——色觉障碍在男性里的比例接近百分之八,中老年网民更是一大群体。网站设计的无障碍,受益的远不止特殊人群,是所有人。
对比度是最便宜的提升
浅灰字配白底是这几年流行的排版,好看,可对比度常常不达标。把正文和背景的对比度做到4.5比1以上,辅助说明做到3比1,页面立刻清爽易读,看起来反而更精神,按钮文字和按钮底色的对比度也要查,常见翻车是白字配浅灰底。工具一查便知,改动零成本。很多「高级感」浅色字,本质是牺牲了半数以上用户的阅读速度。
别只靠颜色传信息
表单报错只把边框变红,色弱用户看不出来,加上文字或图标提示才是完整方案。图表里的红绿两条线,用实线和虚线区分,谁都不会认错。验证码是最常见的拦路虎,换成滑动或算术题,各人群都受益。判断方法简单粗暴:把页面截图转成黑白,信息还完整吗?转完看不出状态的页面就得补。
这些细节顺手就做了
- 正文字号不低于16像素,行距给到字号的1.5倍以上,中老年用户立刻舒服
- 所有图片写alt描述,读屏软件读得出,搜索引擎也收录得更好
- 链接不只是变颜色,加下划线,点击区域别小于44像素见方
- 视频配字幕,不只是为了听障用户,很多人在地铁里就是静音刷的
键盘和读屏用户也在名单上
还有一群用户用不了鼠标。键盘Tab键能不能把每个链接和按钮都点到,焦点位置看得清吗,读屏软件念出来的顺序对不对。这些测试用键盘就能做一遍。有站点导航在键盘模式下直接卡死,等于对部分用户关了门。这类问题修起来不难,难的是想起来去查。
两条建议:改版时把黑白截图测试加进验收流程,五分钟的事,新页面上线前随手一转,成本都不到五块钱;适老化不是做一个独立版本,而是把基础可读性做对。比格网络给政企和医疗类客户做网站设计时默认带这套标准,成本几乎为零,口碑上的回报却实打实。