拆分双因素认证HTML输入框时，如何保障屏幕阅读器可访问性

一、用<fieldset>+<legend>的方案是否可行？ #

完全可行，这是适配屏幕阅读器的最优原生方案：

• 它能明确将6个单字符输入框标记为单一逻辑组，<legend>的内容会作为整个组的用途描述，屏幕阅读器在首次聚焦组内输入框时会播报该描述，后续聚焦其他输入框时默认不会重复播报（除非用户自定义了阅读器的播报规则），不会出现重复语音的问题。
• 需要注意：原有的<label for="tfa_code">要移除，因为关联的是隐藏输入框，而隐藏输入框不会被屏幕阅读器识别，留着反而可能造成语义混乱。把<legend>的内容设为"Verification Code"即可替代原标签的作用。

优化后的代码示例：

<fieldset>
  <legend>Verification Code</legend>
  <input type="hidden" name="tfa_code" id="tfa_code"/>
  <input type="tel" inputmode="numeric" id="regcode0" maxlength="1" aria-label="第1位验证码"/>
  <input type="tel" inputmode="numeric" id="regcode1" maxlength="1" aria-label="第2位验证码"/>
  <input type="tel" inputmode="numeric" id="regcode2" maxlength="1" aria-label="第3位验证码"/>
  <input type="tel" inputmode="numeric" id="regcode3" maxlength="1" aria-label="第4位验证码"/>
  <input type="tel" inputmode="numeric" id="regcode4" maxlength="1" aria-label="第5位验证码"/>
  <input type="tel" inputmode="numeric" id="regcode5" maxlength="1" aria-label="第6位验证码"/>
</fieldset>
<button type="submit">Submit</button>

这里额外把输入框类型改成type="tel"并添加inputmode="numeric"，是为了让移动端弹出数字键盘，提升操作体验；同时给每个输入框加aria-label明确当前是第几位验证码，进一步优化屏幕阅读器的播报清晰度。

二、关于aria-labelledby和role="group"的判断是否正确？ #

你的判断基本准确：

• aria-labelledby如果绑定同一个标签元素，每次聚焦输入框时确实会重复播报标签内容，这会给屏幕阅读器用户带来冗余的听觉干扰，体验很差，不建议这么用。
• role="group"本身没有原生<fieldset>的语义优势，它必须搭配aria-label或aria-labelledby才能生效，而<fieldset>+<legend>是浏览器原生支持的分组语义，不需要额外ARIA属性就能被所有屏幕阅读器正确识别，兼容性和可靠性都更强，role="group"在这里确实提供不了<fieldset>之外的额外价值。

内容的提问来源于stack exchange，提问作者miken32