跳转到页面内容
圆点软件.YUANDIAN SOFTWARE

YUANDIAN / INSIGHTS & IDEAS

无障碍设计基础:键盘、对比度与语义标签

无障碍不是额外功能,而是很多用户能不能用起来的前提。键盘可达、对比度达标、语义标签规范,是最该优先做好的三件事。

专注软件开发 · 连接业务与可能产品与设计
无障碍设计基础:键盘、对比度与语义标签

键盘能不能走通全流程

检查无障碍最直接的方式是拔掉鼠标,只用键盘完成一次核心流程。如果中途卡住,说明存在键盘不可达的环节,这通常会影响的不只是键盘用户,还有临时用外接键盘、或者操作精确度受限的人。

焦点顺序要跟视觉顺序一致。页面上从左到右、从上到下的阅读顺序,与按下 Tab 键时的跳转顺序应该吻合,否则用户会来回跳跃,很容易失去位置感。

聚焦样式必须可见。很多项目为了美观把默认描边去掉,却没有补上替代样式,结果用户完全不知道自己当前停在哪个元素上。补一个清晰但不刺眼的聚焦样式,是最低要求。

弹窗打开后要把焦点移入并限制在弹窗内部,关闭后回到触发它的元素。这两步不做,键盘用户会跑到弹窗背后的页面上去。

对比度达到什么程度

正文文字与背景的对比要足够高,浅灰文字配白底是最常见的踩坑点,看起来精致,实际在户外或亮度不足的屏幕上几乎读不清。正文尽量保持较高的对比,辅助文字也不能低到难以辨认。

不要只靠颜色传递状态。审核中与已通过如果只用绿色和黄色区分,色觉异常的用户无法分辨,同时灰度打印或截图也会失真。加一个图标或文字标签,成本很低。

输入框的边框、必填标记、错误提示同样需要足够的对比。错误状态只把边框变成浅红,往往不够明显,配合文字说明才可靠。字号和行高也影响可读性。正文过小或行距过密时,视力不佳的用户会直接放弃阅读,这一点在数据密集的表格里尤其明显。

语义标签与替代文本

标题层级要按顺序使用,不要因为字号需要就跳级。屏幕阅读器依靠层级理解页面结构,层级混乱会让导航变得很困难。一个页面通常只有一个一级标题。

可点击的元素要用真正可点击的标签,而不是给普通容器绑点击事件。后者在键盘和屏幕阅读器里都不会被识别为可操作元素,用户根本找不到它。

图片的替代文本要写它传达的信息。纯装饰性图片留空即可,让阅读器跳过;承载信息的图片则要说明内容。

视频和音频内容同样需要替代方案。自动播放的动效要能被暂停,否则对注意力敏感的用户会构成干扰,页面也会更难使用。图标按钮必须带上文字说明或可访问名称,否则读出来只有按钮两个字,用户无从判断。装饰性的图标则应该对辅助技术隐藏,反复朗读没有意义的图形名称同样是干扰。

表单与动态内容

表单的标签要与输入框正确关联,点击标签能聚焦到对应输入框。错误提示不仅要显示,还要让辅助技术能感知到,用户才会知道提交失败以及失败在哪里。

动态更新的内容,比如筛选结果数量、提交成功的提示,要用适当的方式播报,否则依赖阅读器的用户看不到任何变化。

这些改动大多不涉及视觉设计,工作量集中在开发习惯上。把它们写进交付验收清单,比事后专门整改更省力。

无障碍可用性

LET’S BUILD TOGETHER

让思考,成为下一步行动。

把业务场景与初步想法告诉我们,一起找到合适的实现方式。