本文介绍一种兼顾视觉体验与无障碍需求的验证码输入方案：通过隐藏原始单字段供屏幕阅读器使用，同时为普通用户展示分割式输入框，并利用 autocomplete="one-time-code" 提升自动填充体验。
本文介绍一种兼顾视觉体验与无障碍需求的验证码输入方案：通过隐藏原始单字段供屏幕阅读器使用，同时为普通用户展示分割式输入框，并利用 `autocomplete="one-time-code"` 提升自动填充体验。
在构建双因素认证（2FA）流程时，常见做法是将一个 6 位验证码拆分为多个单字符输入框（如 regcode0–regcode5），以提升视觉清晰度和用户输入引导。然而，这种 UI 重构若未妥善处理无障碍（a11y）语义，极易导致屏幕阅读器用户困惑——例如逐个朗读“编辑文本，空”六次，却无法理解它们共同构成一个逻辑整体。
错误思路辨析
单纯使用 <fieldset></fieldset> + <legend></legend> 包裹多个独立 <input> 并不可取：
- 隐藏域
<input type="hidden">不应出现在可聚焦流中，且<fieldset></fieldset>无法消除其对辅助技术的干扰； -
aria-labelledby会导致每个输入获得重复的标签播报，破坏操作节奏； -
role="group"缺乏原生语义支持，不如标准 HTML 元素可靠。
✅ 推荐方案：分离渲染路径，各司其职
核心原则是 「视觉呈现与辅助技术语义解耦」：
- 保留原始
<input type="text" id="tfa_code">作为唯一被屏幕阅读器识别的控件，赋予完整语义与可访问性； - 使用
class="visually-hidden"（如 Bootstrap 的.visually-hidden或自定义 CSS）将其视觉隐藏，但保持可聚焦、可读取； - 将分割式输入框包裹在
<div aria-hidden="true"> 中，使其完全脱离辅助技术树，仅服务于视觉用户； <li>为原始输入添加 <code>autocomplete="one-time-code"，触发现代浏览器（Chrome、Safari、Edge）对 OTP 的智能识别与自动填充。
<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 — enter 6 digits"><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>
? 关键补充说明：
-
inputmode="numeric"建议用于分割输入框，提示移动端显示数字键盘； -
aria-label可选添加于原始输入，进一步明确用途（尤其当<label></label>文本不够直观时）； - JavaScript 脚本需同步更新隐藏输入的值（如监听分割框的
input事件拼接字符串），并确保焦点管理合理（例如回删时自动跳转前一框）； -
务必测试焦点行为：确认
autocomplete="one-time-code"不会意外触发隐藏输入自动获取焦点（可通过autofocus属性禁用或 JS 控制）； - 避免使用
display: none或visibility: hidden隐藏原始输入——这会使它彻底不可访问；.visually-hidden应采用position: absolute; clip: rect(0 0 0 0);等无障碍安全方式。
该方案已被主流框架（如 GOV.UK、WebAIM 实践指南）验证为平衡可用性与合规性的最佳实践，既满足 WCAG 2.1 SC 1.3.1（信息与关系）、4.1.2（名称、角色、值）等核心要求，又不牺牲前端交互体验。
