将 HTML 文本输入拆分为多个输入，同时保持可访问性

Answer 1

根据安迪对这个问题的评论，我决定根本不为屏幕阅读器用户分割该字段，从而避免了这个问题。单个字段对于标准浏览器来说是隐藏，而拆分字段对于屏幕阅读器来说是隐藏：

<label for="tfa_code">Verification Code</label>
<input type="text" name="tfa_code" id="tfa_code" class="visually-hidden" autocomplete="one-time-code"/>
<div aria-hidden="true">
    <input type="text" id="regcode0" maxlength="1"/>
    <input type="text" id="regcode1" maxlength="1"/>
    <input type="text" id="regcode2" maxlength="1"/>
    <input type="text" id="regcode3" maxlength="1"/>
    <input type="text" id="regcode4" maxlength="1"/>
    <input type="text" id="regcode5" maxlength="1"/>
</div>
<button type="submit">Submit</button>

计划进行测试，以确保视觉上隐藏的输入不会因为自动完成属性而试图抢走标准浏览器的注意力，但到目前为止似乎还不错。