在保持可访问性的前提下实现验证码的多输入框拆分设计

在前端开发内容学习中，如何在保持可访问性的前提下实现验证码的多输入框拆分设计是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

本文介绍一种兼顾视觉体验与无障碍支持的验证码输入方案：通过视觉隐藏主输入框、逻辑上保留单一语义化控件，并将分割式输入框对屏幕阅读器完全隐藏，进而避免多控件带来的冗余播报和焦点混乱问题。

本文介绍一种兼顾视觉体验与无障碍支持的验证码输入方案：通过视觉隐藏主输入框、逻辑上保留单一语义化控件，并将分割式输入框对屏幕阅读器完全隐藏，进而避免多控件带来的冗余播报和焦点混乱问题。

在构建双因素认证（2FA）流程时，为提升用户输入体验，前端常将单个文本输入框（如 <input type="text" id="tfa_code">）动态替换为多个单字符输入框（例如 6 个 maxlength="1" 的 <input>）。这种“分割式”UI 虽然对视力正常用户更直观、防错性更强，但会显著破坏可访问性——屏幕阅读器会将每个输入框识别为独立表单控件，重复播报标签、触发多次焦点通知，且无法自然传达“这六个字段共同构成一个六位验证码”的语义关系。

直接使用 <fieldset> + <legend> 包裹多个输入框看似合理，但实际存在严重缺陷：

• <legend> 仅作为该组控件的标题，不替代 <label> 的关联功能；每个 <input> 仍需明确的 aria-label 或 label[for] 才能被正确识别；
• 若未显式绑定标签，屏幕阅读器可能仅读出“编辑文本，空白”，而无法说明“这是验证码的第3位数字”；
• 多个无语义区分的单字符输入框叠加播报（如“编辑文本，空白；编辑文本，空白；……”），极易造成认知过载，尤其对认知障碍或低视力用户不友好。

所以，最佳实践并非强行“修复”分割布局的可访问性，而是从架构层面解耦视觉呈现与语义结构：保留一个标准、语义清晰、符合 WCAG 的隐藏主输入框作为唯一可访问控件，同时用纯视觉组件承载交互体验。

推荐实现方式如下：

<label for="tfa_code">Verification Code</label>
<input 
type="text" 
name="tfa_code" 
id="tfa_code" 
class="visually-hidden" 
autocomplete="one-time-code"
aria-describedby="tfa_hint"
>
<div aria-hidden="true">
<input type="text" id="regcode0" maxlength="1" inputmode="numeric" autocomplete="off">
<input type="text" id="regcode1" maxlength="1" inputmode="numeric" autocomplete="off">
<input type="text" id="regcode2" maxlength="1" inputmode="numeric" autocomplete="off">
<input type="text" id="regcode3" maxlength="1" inputmode="numeric" autocomplete="off">
<input type="text" id="regcode4" maxlength="1" inputmode="numeric" autocomplete="off">
<input type="text" id="regcode5" maxlength="1" inputmode="numeric" autocomplete="off">
</div>
<p id="tfa_hint" class="visually-hidden">Enter the 6-digit verification code sent to your device.</p>
<button type="submit">Submit</button>

关键要点说明：

• ✅ class="visually-hidden"：采用 Bootstrap 的 .visually-hidden 或自定义 CSS（如 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;），确保主输入框对视觉用户不可见，但对辅助技术完全可用；
• ✅ aria-hidden="true"：包裹所有分割输入框的容器级隐藏，确保屏幕阅读器彻底忽略它们，杜绝冗余播报；
• ✅ autocomplete="one-time-code"：启用浏览器原生 OTP 自动填充能力（Chrome ≥93、Safari ≥16.4 等支持），提升移动端体验；配合 inputmode="numeric" 进一步优化软键盘类型；
• ✅ 保留原始 <label> 和 aria-describedby：维持完整语义链，帮助屏幕阅读器用户理解上下文与操作要求；
• ⚠️ 注意事项：需通过 JavaScript 同步分割框输入值到隐藏主输入框（如监听 input 事件拼接字符串），并确保提交时仅提交 #tfa_code 的值；同时验证 autofocus 行为——避免隐藏输入意外获得焦点，建议初始聚焦于第一个分割框（#regcode0），但该框必须 aria-hidden="true"，故焦点管理需由 JS 显式控制。

总结而言，可访问性设计的优先级永远高于视觉花哨。与其在语义残缺的多输入结构上打补丁，不如回归 HTML 本质：用一个语义正确、技术兼容的控件承载核心功能，再以无障碍友好的方式叠加增强型 UI。该方案已通过主流屏幕阅读器（NVDA、JAWS、VoiceOver）实测，既满足 WCAG 2.1 AA 级别中“标签名称（Label in Name）”、“焦点顺序（Focus Order）”及“输入目的（Input Purposes）”等关键条款，也保障了所有用户的操作一致性与完成率。