本文介绍一种兼顾视觉体验与无障碍支持的验证码输入方案：通过视觉隐藏主输入框、逻辑上保留单一语义化控件，并将分割式输入框对屏幕阅读器完全隐藏，从而避免多控件带来的冗余播报和焦点混乱问题。
本文介绍一种兼顾视觉体验与无障碍支持的验证码输入方案：通过视觉隐藏主输入框、逻辑上保留单一语义化控件，并将分割式输入框对屏幕阅读器完全隐藏，从而避免多控件带来的冗余播报和焦点混乱问题。
在构建双因素认证（2FA）流程时，为提升用户输入体验，前端常将单个文本输入框（如 <input type="text" id="tfa_code">）动态替换为多个单字符输入框（例如 6 个 maxlength="1" 的 <input>）。这种“分割式”UI 虽然对视力正常用户更直观、防错性更强，但会显著破坏可访问性——屏幕阅读器会将每个输入框识别为独立表单控件，重复播报标签、触发多次焦点通知，且无法自然传达“这六个字段共同构成一个六位验证码”的语义关系。
直接使用 <fieldset></fieldset> + <legend></legend> 包裹多个输入框看似合理，但实际存在严重缺陷：
-
<legend></legend>仅作为该组控件的标题，不替代<label></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></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）”等关键条款，也保障了所有用户的操作一致性与完成率。
