无障碍开发：如何为页面元素设置自定义tab focus跳转顺序

结论 #

可以实现，以下是两种符合无障碍规范的常用实现方案：

方案1：JS键盘事件监听（灵活兼容现有页面结构） #

适用场景：不想改动现有DOM结构和CSS布局的情况，只需少量JS即可实现需求。
实现逻辑：给最后一个表单字段绑定keydown事件，捕获正向Tab按下的动作，阻止默认的跳转浏览器控件行为，手动将聚焦状态切换到Save按钮。

代码示例：

<!-- 右上角按钮区域 -->
<div class="header-actions">
  <button type="button">取消</button>
  <button type="submit" id="save-btn">Save</button>
</div>
<!-- 表单区域 -->
<form id="custom-form">
  <input type="text" placeholder="字段1">
  <input type="text" placeholder="字段2">
  <!-- 最后一个表单字段 -->
  <input type="text" id="last-form-field" placeholder="最后一个字段">
</form>

const lastFormField = document.getElementById('last-form-field');
const saveBtn = document.getElementById('save-btn');

lastFormField.addEventListener('keydown', (e) => {
  // 仅捕获正向Tab按下的场景
  if (e.key === 'Tab' && !e.shiftKey) {
    e.preventDefault();
    saveBtn.focus();
  }
});

注意事项：该方案不会修改页面默认的聚焦逻辑，仅在最后一个字段按正向Tab时触发自定义跳转，对屏幕阅读器等辅助设备友好。

方案2：调整DOM顺序+CSS定位（纯HTML/CSS实现，无额外JS） #

适用场景：可以调整页面结构的情况，是兼容性最好的方案。
实现逻辑：原生Tab导航的默认顺序完全和DOM节点的先后顺序一致，只需把Save按钮的DOM节点放在所有表单字段的后面，再通过CSS绝对定位将其固定到右上角即可，无需额外代码就能实现你要的跳转逻辑。

代码示例：

<form id="custom-form">
  <input type="text" placeholder="字段1">
  <input type="text" placeholder="字段2">
  <input type="text" placeholder="最后一个字段">
  <!-- Save按钮DOM放在表单最后，默认Tab顺序自然在所有字段之后 -->
  <button type="submit" id="save-btn">Save</button>
</form>
<!-- 其他右上角按钮也可以同样调整DOM顺序后用CSS定位 -->
<button type="button">取消</button>

#save-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  /* 按钮原有样式 */
}

注意事项：不要使用正数值的tabindex属性强制调整聚焦顺序，这类操作会破坏页面全局的原生导航逻辑，反而会降低无障碍体验。

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