登录页怎么做无障碍?WCAG 2.2 Accessible Authentication 不只是“加个验证码替代方案”主题视觉

登录页怎么做无障碍?WCAG 2.2 Accessible Authentication 不只是“加个验证码替代方案”

作者:界达设计公司 阅读时间:约 8 分钟

无障碍登录的关键不是降低安全,而是不要把“记住、抄写、解谜”当成唯一证明身份的方式。WCAG 2.2 明确把密码管理器和复制粘贴视为可帮助用户完成认知测试的机制。

登录流程常被当成安全团队的领域,设计只负责画输入框。但 WCAG 2.2 的 Accessible Authentication(Minimum)直接把认证体验纳入认知无障碍:用户不应该被迫依赖记忆、计算或解谜,除非提供替代方法或辅助机制。安全与无障碍并不冲突,很多改进反而让所有用户都更容易登录。

01 先回答最关键的问题:不要阻止用户使用“外部认知辅助”

密码管理器、复制粘贴、浏览器自动填充都能降低记忆和转录负担。为了所谓“安全”禁用粘贴、强迫手输验证码,往往同时伤害无障碍和正常用户。

02 一、不要禁止密码框复制粘贴

W3C 对 Accessible Authentication 的说明明确把密码管理器与复制粘贴列为帮助完成认证的机制。禁用 paste 不会真正阻止高级攻击者,却会让使用密码管理器、认知障碍、运动障碍或长随机密码的用户更困难。

03 二、OTP 应支持自动填充和整段粘贴

六位验证码常被设计成 6 个独立输入框,并要求一个个键入。视觉上整齐,但可能增加键盘、读屏和粘贴难度。产品至少应允许用户复制整串验证码并自动分配,移动端可支持系统提供的 one-time-code 自动填充。

三、不要把“记住复杂规则”当作安全策略的视觉化说明

04 三、不要把“记住复杂规则”当作安全策略

密码规则应该在输入时清楚显示,并即时提示哪些条件未满足。不要提交后才告诉用户“必须包含大小写、符号且不能与前三次相同”。更现代的安全实践通常更重视密码长度、密码管理器、多因素认证和泄露检测,而不是让用户记忆越来越复杂的格式。

05 四、图片验证码要提供不依赖同一认知能力的替代

“选择所有红绿灯”“拼图拖动”本身就是认知/感知任务。WCAG 允许在一定条件下使用认证测试,但需要可替代方式或辅助机制。对于真实产品,还要兼顾视觉、听觉、运动和认知障碍,不能用“语音验证码”机械替代所有问题。

06 五、登录错误要告诉用户下一步,而不是只说“认证失败”

安全考虑可能不允许明确告诉攻击者“邮箱存在但密码错误”,但仍可给合法用户可执行路径:检查输入、重置密码、使用其他登录方式、联系客服。错误信息应与具体字段关联,并能被辅助技术感知。

六、企业 SSO/MFA 要减少重复输入的视觉化说明

07 六、企业 SSO/MFA 要减少重复输入

用户在同一认证流程里已经输入姓名、账号或组织信息后,不应在下一步无理由再次要求手动填写。WCAG 2.2 的 Redundant Entry 也强调同一流程中的重复信息应自动填充或可直接选择,除非存在必要例外。

08 七、记住设备与风险认证要给用户解释

“30 天内不再询问”“此设备受信任”会影响安全边界。说明作用和撤销入口,避免用户为了减少 MFA 摩擦永久信任公共电脑。安全设置的可理解性本身也是体验质量。

09 登录页无障碍验收清单

  • 密码/验证码可以复制粘贴,不使用脚本阻止。
  • 支持密码管理器和浏览器自动填充。
  • OTP 可整串输入,并有明确标签和剩余时间。
  • 验证码或认知测试存在可行替代。
  • 键盘和读屏可以完成整个认证流程。
  • 错误后保留合理已填内容,并给出恢复路径。

10 最后:认证的目标是验证身份,不是测试用户能力

安全流程越复杂,越容易出现“为了防攻击,把合法用户挡在门外”的设计。Accessible Authentication 提醒团队把安全目标和交互方式分开:可以保持严格安全要求,同时让用户借助工具、替代方式和清晰反馈完成认证。

八、Passkey 和无密码登录也要做无障碍验证的视觉化说明

11 八、Passkey 和无密码登录也要做无障碍验证

Passkey 可以减少记忆密码的负担,但具体体验仍涉及设备切换、生物识别不可用、二维码跨设备、账号恢复等路径。不能因为技术叫“passwordless”就假设天然无障碍。每一种主认证方式都应有可理解的恢复和替代路径。

12 九、认证流程要测试“失败三次以后”

很多无障碍问题只在异常时出现:验证码过期、设备不在身边、密码管理器没填上、MFA 失败、账号锁定。验收应刻意走失败路径,检查错误是否保留上下文、是否能选择其他方式,以及用户是否知道接下来找谁。

常见问题

登录页禁止粘贴密码是否更安全?

通常不是好的安全实践,也会阻碍密码管理器和无障碍使用。安全应依赖真正的认证控制,而不是增加手动输入摩擦。

WCAG 2.2 是否禁止验证码?

不是绝对禁止,但认知测试需要满足替代、辅助或其他例外条件,并考虑不同障碍用户。

短信验证码必须拆成 6 个输入框吗?

不需要。单一输入框通常更简单;如果视觉上拆分,也应支持整串粘贴和读屏。

密码管理器属于无障碍功能吗?

W3C 明确把它作为帮助用户完成认证认知要求的机制之一,同时也提升整体安全性。

企业 SSO 是否天然无障碍?

不一定。跳转、MFA、错误状态、超时和身份选择仍需要键盘、读屏和认知无障碍测试。

相关服务与进一步咨询​

相关服务了解详情
UI/UX设计服务查看服务详情
项目咨询联系界达设计
设计与建站文章阅读更多相关文章
链接复制成功

从想法到落地,我们一起完成

以用户体验为核心,打造真正可用、可增长的数字产品

和我谈谈您的项目