如何在保持无障碍访问的前提下实现验证码输入框的视觉分割-html教程-PHP中文网

如何在保持无障碍访问的前提下实现验证码输入框的视觉分割

本文介绍一种兼顾视觉体验与无障碍访问的验证码输入方案：通过 CSS 视觉隐藏主输入框供屏幕阅读器使用，同时用 aria-hidden="true" 隐藏分割后的单字符输入框，确保语义清晰、焦点可控、兼容主流辅助技术。

本文介绍一种兼顾视觉体验与无障碍访问的验证码输入方案：通过 css 视觉隐藏主输入框供屏幕阅读器使用，同时用 `aria-hidden="true"` 隐藏分割后的单字符输入框，确保语义清晰、焦点可控、兼容主流辅助技术。

在构建双因素认证（2FA）流程时，开发者常将一个 6 位验证码拆分为多个独立的单字符 <input> 元素，以提升视觉引导性与移动端输入体验。然而，这种“视觉分割”若未妥善处理无障碍语义，极易导致屏幕阅读器用户遭遇重复播报、逻辑断裂或焦点迷失等问题。

直接使用 <fieldset></fieldset> + <legend></legend> 包裹多个输入框看似合理，但存在本质缺陷：每个 <input> 仍需独立可聚焦，而 <legend></legend> 会被反复读出（尤其在切换焦点时），造成冗余干扰；且隐藏域 <input type="hidden"> 本身无语义、不可访问，无法作为真实表单控件被识别。

✅ 推荐方案：分离呈现层与语义层
核心思路是——让屏幕阅读器只感知一个语义完整、标准可用的输入框；让视觉用户只看到分割式交互界面。具体实现如下：

<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="Six-digit verification code"><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>
<button type="submit">Submit</button>

? 关键要点说明：

.visually-hidden 是 WCAG 推荐的辅助技术可见类（如 Bootstrap 的 visually-hidden 或自定义 .sr-only），它隐藏元素视觉表现但保留其可访问性树节点；
aria-hidden="true" 应用于整个分割输入容器，确保所有子 <input> 完全从辅助技术中移除，避免任何焦点或播报干扰；
autocomplete="one-time-code" 启用浏览器原生 OTP 自动填充（Chrome ≥108 / Safari ≥16.4），大幅提升移动用户体验；
显式添加 aria-label 可强化语义（尤其当 <label></label> 关联可能因 DOM 结构变化失效时）；
inputmode="numeric" 和 autocomplete="off"（对分割框）有助于软键盘优化与防误填，但切勿对主输入框禁用 autocomplete——这会破坏 OTP 自动填充功能。

⚠️ 注意事项：

禁止为分割输入框添加 label、aria-labelledby 或 aria-label，否则将与 aria-hidden 冲突或触发意外播报；
JavaScript 控制逻辑（如自动跳转、粘贴解析）必须同步更新主输入框的 value，并确保其 change/input 事件正常触发；
测试务必覆盖主流屏幕阅读器（NVDA + Firefox、VoiceOver + Safari、TalkBack + Chrome）及不同输入方式（键盘 Tab、触摸导航、语音指令）；
若需支持旧版浏览器（如 IE），应提供降级 fallback（例如回退至单输入框 + 正则提示）。