Chrome重置密码表单含隐藏用户名仍触发可访问性警告求助

你已经试过调整隐藏字段、设置只读属性这些方法，但Chrome的无障碍警告还是没消失？我来帮你拆解下Chrome到底认什么样的用户名字段格式。

首先得明确：Chrome抛出这个警告的核心是让密码管理工具、无障碍设备能准确识别重置密码对应的账号——哪怕用户不需要手动输入，系统也得明确告诉浏览器“这个重置操作属于哪个用户”。你的现有代码虽然有隐藏的username字段，但可能没踩中Chrome的检测逻辑点，下面是几种Chrome认可的正确格式：

1. 调整字段位置与层级，放在密码字段之前且层级更直接 #

Chrome的检测逻辑对字段顺序和嵌套层级很敏感，建议把隐藏的用户名字段直接放在<form>根层级下，且所有密码字段的前面，避免嵌套过深的容器：

<form data-ember-action data-ember-action-436="436">
  <!-- 移到form最开头，根层级放置 -->
  <input type="hidden" name="username" autocomplete="username" value="a_b">
  <div class="form-group">
    <label for="newpasswordone">Password</label>
    <input type="password" autocomplete="new-password" placeholder="Enter your new password" id="ember437" class="form-control ember-text-field ember-view" data-op-id="0">
    <label for="newpasswordtwo">Password (again)</label>
    <input type="password" autocomplete="new-password" placeholder="Re-enter your new password" id="ember438" class="form-control ember-text-field ember-view" data-op-id="1">
  </div>
  <button disabled type="submit" class="btn btn-default">Reset password</button>
</form>

2. 给隐藏字段补充无障碍属性（可选但强化兼容性） #

如果必须保留现有容器结构，给隐藏字段加上aria-hidden="false"，明确告诉无障碍工具这个字段是有语义价值的，同时确保autocomplete="username"属性准确无误：

<input type="hidden" name="username" autocomplete="username" value="a_b" aria-hidden="false">

3. 用视觉隐藏的可识别字段替代type="hidden" #

如果尝试取消隐藏字段仍无效，可以用CSS视觉隐藏而非type="hidden"，同时设置readonly和tabindex="-1"避免用户交互，这种方式Chrome的检测逻辑更容易识别：

<input type="text" name="username" autocomplete="username" value="a_b" readonly tabindex="-1" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">

为什么你的原有代码没生效？ #

Chrome的表单检测逻辑有几个隐性要求：

• 用户名字段必须在密码字段之前出现
• 字段嵌套层级不能过深（最好直接属于<form>）
• autocomplete属性必须精确匹配username（不能拼写错误）

把隐藏字段移到form最开头，大概率就能消除这个警告了。

内容的提问来源于stack exchange，提问作者arne.b