News & Insights

网站设计的无障碍细节,色弱用户和老花眼都在意

无障碍不是公益口号,色弱人群占男性近一成,中老年用户的视力需求更普遍。本文讲网站设计里成本最低的无障碍改进:对比度达标、别只靠颜色传信息、字号行距达标、图片描述和键盘操作可用,兼顾体验和搜索收录,惠及所有访客。

网站设计的无障碍细节,色弱用户和老花眼都在意

朋友的父亲想在手机上查社区医院信息,把字体调到最大还是看不清验证码,红绿色的按钮提示他也分不出状态。他后来自己戴着老花镜在手机上试了一遍自家网站,回来直接立项改版。这类用户不在少数——色觉障碍在男性里的比例接近百分之八,中老年网民更是一大群体。网站设计的无障碍,受益的远不止特殊人群,是所有人。

对比度是最便宜的提升

浅灰字配白底是这几年流行的排版,好看,可对比度常常不达标。把正文和背景的对比度做到4.5比1以上,辅助说明做到3比1,页面立刻清爽易读,看起来反而更精神,按钮文字和按钮底色的对比度也要查,常见翻车是白字配浅灰底。工具一查便知,改动零成本。很多「高级感」浅色字,本质是牺牲了半数以上用户的阅读速度。

别只靠颜色传信息

表单报错只把边框变红,色弱用户看不出来,加上文字或图标提示才是完整方案。图表里的红绿两条线,用实线和虚线区分,谁都不会认错。验证码是最常见的拦路虎,换成滑动或算术题,各人群都受益。判断方法简单粗暴:把页面截图转成黑白,信息还完整吗?转完看不出状态的页面就得补。

这些细节顺手就做了

  • 正文字号不低于16像素,行距给到字号的1.5倍以上,中老年用户立刻舒服
  • 所有图片写alt描述,读屏软件读得出,搜索引擎也收录得更好
  • 链接不只是变颜色,加下划线,点击区域别小于44像素见方
  • 视频配字幕,不只是为了听障用户,很多人在地铁里就是静音刷的

键盘和读屏用户也在名单上

还有一群用户用不了鼠标。键盘Tab键能不能把每个链接和按钮都点到,焦点位置看得清吗,读屏软件念出来的顺序对不对。这些测试用键盘就能做一遍。有站点导航在键盘模式下直接卡死,等于对部分用户关了门。这类问题修起来不难,难的是想起来去查。

两条建议:改版时把黑白截图测试加进验收流程,五分钟的事,新页面上线前随手一转,成本都不到五块钱;适老化不是做一个独立版本,而是把基础可读性做对。比格网络给政企和医疗类客户做网站设计时默认带这套标准,成本几乎为零,口碑上的回报却实打实。

分享这篇文章:

准备好开启您的数字化之旅了吗?

让我们一起打造专业、高效、可增长的企业官网

✓ 链接已复制到剪贴板
电话咨询 免费咨询 获取方案
跳转咨询表单 免费获取方案 18942912117 在线咨询