官网无障碍设计：字号、对比度和键盘操作查哪几项

一个官网，访客不只有视力良好、手里拿着鼠标的人：有人年纪大了，字小一点就读不下去；有人是色弱，分不清红和绿；有人在太阳底下用手机，浅灰色的字几乎看不见；有人手受了伤，只能用键盘操作。这些情形里，访客不是不想看，是页面没给他留出路。

无障碍设计，就是在设计和开发时，把这些情形提前考虑进去。这篇讲官网上线前，可以先查的五项。

一、字号和行距：放大以后还能读

先看正文。手机上，正文要在不放大的情况下就能舒服地读完一段；访客自己把页面放大，版式不能散架：文字不叠在一起，按钮不被挤出屏幕，需要左右拖动才能读完一行的情况尽量避免。

行距也要留够。一整段挤在一起的小字，对谁都费劲，对视力不好的人更是如此。标题和正文的字号要拉开层级，让访客一眼分出「这是标题、这是正文、这是注释」。

二、对比度：文字和背景要分得开

对比度指文字颜色和背景颜色的明暗差距。浅灰字配白底、彩色字配彩色底，在设计稿里看着好看，换到室外强光下的手机，就容易看不清。

做法是：正文、链接、按钮上的文字，都要和背景保持足够的明暗差。网页无障碍指南（WCAG）对正文和大号文字都给出了具体的对比度比值，设计时可以用对比度检查工具逐个核对，不要凭眼睛判断。品牌色放在文字上之前，先过一遍这个检查；品牌色不够深的，让它做色块和装饰，文字另选更深的颜色。字体和配色怎么写进品牌规范，可以看官网字体和配色怎么定，才和品牌手册对得上。

三、不只靠颜色传达信息

「红色的是错误，绿色的是成功」这种做法，色弱的访客看不出区别。同样的信息，要再配上另一种线索：

• 表单填错了，除了把边框变红，还要写一句文字说明哪里错了、怎么改；
• 链接除了变色，还要有下划线或其他样式上的区分；
• 图表里的不同线条，除了颜色，再用线型或直接标注区分。

四、键盘操作：不用鼠标，能不能走完主要流程

把鼠标放到一边，只用键盘的 Tab 键、回车键，从页面顶部走一遍主要流程：打开菜单、进入某个栏目、填写并提交联系表单。重点看四件事：

• 顺序合不合理。 焦点跳转的顺序，要和页面从上到下、从左到右的阅读顺序一致，不要忽前忽后。
• 看不看得见焦点。 焦点停在哪个按钮或链接上，页面上要有清楚的外框提示，别为了好看把它去掉。
• 有没有走不出去的地方。 弹窗、下拉菜单打开后，要能用键盘关闭，焦点不能卡在里面。
• 主要功能能不能触达。 菜单、搜索、联系表单，这些常用的入口，必须都能用键盘打开和操作。

五、图片、视频和表单：给看不到的人一段文字

图片里表达了信息的，要给一段简短的文字说明，屏幕朗读软件读到这里，才知道这张图在讲什么。纯装饰的图可以不写。视频尽量提供字幕，访客在安静的场合或听不清时也能看。

表单的每个输入框都要有明确的文字标签，不要只在框里放一行灰色的提示字，一输入就消失；必填项要标明，出错时要说清哪一项出了问题。

另外，访客设置了系统的「减弱动态效果」时，页面应当尊重这个设置，这一点可以对照官网动效怎么用，才不拖慢页面里的做法。

上线前怎么自查

拿一份清单，把上面五项各走一遍：

1. 把页面放大，看版式有没有散开；
2. 对着设计稿里的文字和按钮，逐个检查对比度；
3. 把页面调成黑白，看信息是否还能分辨；
4. 只用键盘，走完打开菜单、浏览内容、提交表单的流程；
5. 检查有信息的图片是否有文字说明，表单是否有清楚的标签。

查出来的问题，按「影响多少访客、改动多大」排个先后，先改主要流程上的。

小结

官网无障碍设计，先查五项：字号和行距放大后能不能读，文字和背景的对比度够不够，信息是不是只靠颜色传达，只用键盘能不能走完主要流程，图片和表单有没有文字说明。这些检查不改变品牌的风格，却能让更多访客顺利用完页面。

飞沐的数字体验服务涵盖官网、小程序、App 与 H5 的策略、设计与开发。