一个视障用户打开某银行网站，网站无障准备登录查账。碍登屏幕阅读器读到"请输入用户名"后，录页他输入信息，面改按Tab键跳到下一栏，进建听到的网站无障却是"图形验证码"。问题来了——他看不见图形。碍登页面没有提供语音验证码选项，录页也没有任何替代方案。面改他只能关掉页面，进建打电话给客服。网站无障这条路径多花了十五分钟，碍登而视力正常的录页用户只需要二十秒。

这不是面改个例。我测试过国内二十多个主流网站的进建登录页，超过六成存在类似的阻断性问题。验证码是重灾区，但远不止于此。

验证码不该是唯一的路

图形验证码对视障用户几乎等于一道锁死的门。有些网站做了语音验证码，但入口藏得很深——要点击一个没有文字标签的小喇叭图标，屏幕阅读器读出来只是"按钮"，用户根本不知道那是什么。更常见的情况是：语音验证码的音频质量差到连正常人都听不清，背景噪音比人声还大。

可行的做法是提供多种验证方式。邮箱验证链接、短信验证码、或者基于WebAuthn的生物认证，都能绕开纯视觉验证的坑。如果必须保留图形验证码，至少要做到三点：图片有alt属性描述、提供语音替代、语音按钮有明确的文字标签。

焦点顺序经常是乱的

键盘用户按Tab键浏览页面时，焦点应该按照视觉逻辑移动：用户名→密码→登录按钮。但我见过不少页面，焦点先跳到页脚的隐私政策链接，再跳回登录表单。原因通常是DOM结构里把某些元素写在了表单前面，CSS又把它们藏到了视觉上的底部。

修复方法不复杂：确保HTML源码顺序和视觉顺序一致。用CSS的order属性调整布局时，要同步检查Tab顺序是否合理。如果确实需要改变焦点顺序，可以用tabindex属性手动控制，但别滥用正值——那会让焦点跳转变得不可预测。

错误提示要让人听得见

登录失败时，很多页面只在输入框旁边显示一行红色小字。视障用户看不到颜色变化，屏幕阅读器也不会自动朗读这行新出现的文字。他们按了登录按钮，什么反馈都没收到，以为页面卡死了。

正确做法是把错误信息放在aria-live区域里，或者用role="alert"标记。这样屏幕阅读器会自动播报。同时，错误提示不能只说"输入有误"，要具体到"密码错误，请重新输入"或"用户名不存在"。模糊的提示对所有人都是障碍，对视障用户更是灾难。

别忽略对比度和字号

低视力用户不一定用屏幕阅读器，他们可能只是把浏览器放大到300%。如果登录框用了固定像素宽度，放大后内容会溢出容器，按钮被裁掉一半。用相对单位（rem、em）代替px，让布局能随字号缩放。

对比度同样关键。浅灰色占位符文字配白色背景，对比度可能只有2:1，远低于WCAG要求的4.5:1。视力稍差的人根本看不清。用工具测一下，把对比度提到7:1以上更稳妥。

一个小改动带来的变化

去年我参与了一个政务网站的改版。登录页原本只有图形验证码，我们加了语音验证码，给所有图标补了文字标签，把错误提示改成aria-live区域。上线三个月后，客服收到的登录相关投诉减少了四成。不是所有投诉都来自残障用户——有些老年人也受益于更清晰的提示和更大的点击区域。

无障碍设计从来不只是为少数人服务。它让产品在极端场景下依然可用，而每个人迟早都会遇到那些场景。