键盘走不通的官网，每月悄悄放走一批想下单的人

去年帮一家做企业培训的客户复盘后台数据，发现一个怪现象：官网每月自然流量稳定在三点二万，可表单提交量连续四个月卡在日均四十出头。拉出热力图看，首页报名按钮的点击并不低，问题是第二屏往下的内容，有将近两成点击集中在屏幕边缘的空白区。那批人其实在努力够一个被遮住一半的链接，够不到就走了。这不是慈善问题，是网站设计在物理层面把一部分人挡在了门外。

动手前先备齐四样东西

第一份是页面清单，至少覆盖首页、产品详情页、线索表单页、文章详情页这四类，别只测首页。第二是把鼠标收起来，准备只用键盘的 Tab、Shift 加 Tab、回车三颗键走完全程。第三是找个晴天把手机拿到窗外强光下看一眼，很多对比度问题在办公室灯光下根本看不出来。第四是打开浏览器开发者工具里的对比度面板，或者装一个 WebAIM 的在线检查器，用来当场读数。没有这四样，后面的步骤会凭感觉，测出来也不准。

第一步 只用键盘走完关键路径

从浏览器地址栏按 Tab，一路走到表单提交成功提示，记录每一跳焦点落到了哪里。正常的顺序应当和肉眼阅读顺序一致：导航、主按钮、表单字段、提交，不该出现先跳到页脚再跳回正文的情况。每到一个可点元素，确认能看到清晰的焦点框，尺寸不小于二乘二像素、颜色不和底色同化。校验方法是合上鼠标，用键盘把一次报名完整走通，中途没有哪一步必须靠鼠标才能继续。我们做过一次网站设计走查，光是这一步就揪出十一个失焦后消失的浮层，它们在手机上尤其常见。

第二步 把正文对比度拉到四比五以上

正文文字和背景的对比度至少要达到四点五比一，十八像素以上加粗的大字可以放宽到三比一。很多企业站喜欢用浅灰配白底显得高级，实测灰到六十六号才勉强达标，再浅一档手机强光下就糊成一片。按钮上的文字更要注意，蓝底配深蓝字、橙底配红字都是高发翻车点。校验方法是对着开发者工具的对比度面板逐个过主色，低于阈值的色值当场改，改完在强光手机上再扫一遍。别信设计稿上的截图，截图会丢失真实环境的眩光。

第三步 给图片补上能替它说话的文字

每张承载信息的图都要有替代文本，写清楚这张图在讲什么，而不是写图片一、配图二这种废话。产品图就写产品名称和型号，流程图就写流程讲了哪几步。纯装饰的色块和分割线反而应该留空，让读屏软件直接跳过，免得用户听一屏幕装饰两个字。校验方法是关掉图片显示，只看替代文本列表，确认每个能点能读的图都带了一句话说明，装饰图一条都不占篇幅。一家做机械配件的站把参数图补了替代文本后，搜图表说明的人停留时长涨了接近一半。

第四步 表单字段和报错都要念得出来

每个输入框都得有自己的标签，不能只靠占位符占位，因为占位符在输入后消失，键盘用户和读屏用户都会找不到北。报错信息不能只靠颜色，红框加红字很多人分不清，必须配一句人话，比如手机号少一位请补全十一位。提交成功也要有文字或状态变化，不只是页面悄悄跳走。校验方法是用读屏软件把整个表单念一遍，每个字段都能被念出名字，每次报错都带可读原因。这一步直接决定表单能不能收上来，网站设计的细节往往卡在这里。

第五步 字号和点击区给手指留余地

正文最小不小于十五像素，推荐十六像素起步，行高放到一点五倍上下，老年用户和户外强光下才读得动。所有可点元素的热区边长至少四十四像素，手机上两个按钮间距不小于八像素，别让手指一按中俩。很多设计稿在二十七寸屏上看着疏朗，到手机上按钮挤成一行，错误提示正好压在提交键上方。校验方法是把页面在三百七十五像素宽的视窗里过一遍，手指能准确点中每个目标且不误触相邻元素。改完再用单手拇指从屏幕底部往上够，够不到的往下调。

第六步 收掉会自动抢戏的动效

首页自动轮播、弹窗三秒后跳出、滚动触发的全屏动画，对前庭敏感的人会诱发眩晕，对想快点找信息的人纯属干扰。能关就关，关不掉就加一个明显的暂停键，并且尊重系统里的减弱动效设置，用户开了就别再播。自动轮播如果保留，每张停留不能少于五秒，并提供左右切换和停止按钮。校验方法是打开系统减弱动效开关访问一次，确认页面安静下来、没有元素擅自移动。网站设计里动效是调味料，放多了盖掉主菜。

上线前最常踩的四个坑

A 类：弹窗和筛选浮层能看见却拿不到键盘焦点，关不掉只能刷新。处理办法是给浮层容器加键盘可聚焦属性，并在打开时把焦点移进去、关闭时还回原处。B 类：装饰图塞满替代文本，用户听一耳朵全是装饰性的废话。处理是清空所有纯装饰元素的替代文本。C 类：登录和提交只用图形验证码，视障和某些阅读障碍用户根本过不去。换成短信或数学题等文本方式，或提供音频验证码。D 类：表单对错只用红绿区分，色觉障碍用户看不出差别。每处状态都补一句文字，红绿只当辅助。四类问题在一次网站设计验收里各出现过，建议直接写进发布 checklist 拦一道。

发布前对照这五条

一 收起鼠标能走完一次核心转化，焦点顺序和阅读顺序一致。二 正文对比度过四点五比一、大字过三比一，强光手机上重测过关。三 每张信息图有替代文本、装饰图全留空。四 表单每个字段有标签、每次报错带人话、成功有状态。五 正文不小于十五像素、点击区边长不小于四十四像素、自动动效可关且尊重系统设置。五条占住，网站设计在可用性上就过了及格线，那批原来划走的人，会重新变成能下单的访客。