本文介绍一种兼顾视觉体验与屏幕阅读器兼容性的双因素验证码输入方案：通过视觉隐藏主输入框、逻辑上保留单一语义字段，并将分拆的输入框对辅助技术隐藏，从而避免多输入框导致的重复朗读和焦点混乱问题。
本文介绍一种兼顾视觉体验与屏幕阅读器兼容性的双因素验证码输入方案：通过视觉隐藏主输入框、逻辑上保留单一语义字段，并将分拆的输入框对辅助技术隐藏，从而避免多输入框导致的重复朗读和焦点混乱问题。
在构建双因素认证（2FA）界面时，为提升用户输入体验，前端常将一个 6 位验证码字段拆分为 6 个独立的单字符 <input type="text" maxlength="1"> 输入框。这种设计对视觉用户更直观、易定位，但若处理不当，会严重损害屏幕阅读器用户的可访问性——例如每个输入框单独获得焦点时被重复朗读“Verification Code”，或失去语义关联，导致用户误以为需填写 6 个不同字段。
推荐方案：语义优先，分层隐藏
核心原则是 “一个逻辑字段，两种呈现”：
- 保留原始语义完整的
<input>元素（含name、id、label和autocomplete="one-time-code"），确保表单提交、自动填充与无障碍基础支持； - 使用
.visually-hidden（如 Bootstrap 的visually-hidden类，或自定义 CSS）将其视觉隐藏但保留在可访问树中； - 将分拆的输入框包裹在
aria-hidden="true"容器内，使其完全从辅助技术中移除，仅服务于视觉/键盘交互。
<label for="tfa_code">Verification Code</label> <input type="text" name="tfa_code" id="tfa_code" class="visually-hidden" autocomplete="one-time-code" aria-label="Verification Code (6-digit code)"><div aria-hidden="true"> <input type="text" id="regcode0" maxlength="1" inputmode="numeric"><input type="text" id="regcode1" maxlength="1" inputmode="numeric"><input type="text" id="regcode2" maxlength="1" inputmode="numeric"><input type="text" id="regcode3" maxlength="1" inputmode="numeric"><input type="text" id="regcode4" maxlength="1" inputmode="numeric"><input type="text" id="regcode5" maxlength="1" inputmode="numeric"> </div> <button type="submit">Submit</button>
✅ 关键增强点说明：
-
autocomplete="one-time-code"：显式告知浏览器这是动态验证码，触发系统级 OTP 自动填充（Chrome/Safari/Firefox 均支持），大幅提升移动端体验； -
aria-label（可选但推荐）：为视觉隐藏输入补充明确语义，防止某些读屏器因样式隐藏而弱化播报； -
inputmode="numeric"：在移动设备上唤起数字键盘，提升输入效率； -
aria-hidden="true"必须作用于整个容器（而非单个输入框），确保所有子元素均不暴露给辅助技术； - 不使用
<fieldset></fieldset>+<legend></legend>方案，因其仍会使每个输入框被独立识别并重复播报标签，违背“单字段”语义。
⚠️ 注意事项：
- 确保 JavaScript 聚焦逻辑永不主动聚焦
.visually-hidden输入框，否则可能造成焦点丢失或屏幕阅读器异常；所有交互焦点应严格控制在aria-hidden="true"内的可见输入框上； - 后端必须仅校验
tfa_code字段值（由 JS 同步更新），忽略分拆字段的提交值（它们不应有name属性）； - 进行跨平台可访问性测试：NVDA + Firefox、VoiceOver + Safari、TalkBack + Chrome，验证仅播报一次“Verification Code”，且光标在分拆框间移动时无冗余提示。
该方案已在主流框架（如 React/Vue）中被广泛验证，既满足 WCAG 2.1 SC 1.3.1（信息与关系）、4.1.2（名称、角色、值）等核心条款，又无需牺牲现代 UX 设计需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
