使用tabindex保证元素Tab遍历的无障碍访问跨浏览器一致性

问题场景 #

我有一个包含多个<button>元素的表单，出于无障碍访问需求，需实现元素的Tab键遍历功能，每个按钮必须包裹在.item-wrapper容器中。我为按钮元素及用于关闭组件的.close <div>元素添加了tabindex="0"，该设置在Chromium内核浏览器中表现正常，但遇到以下跨浏览器问题：

• Safari中，Tab遍历仅聚焦到.close元素后便跳出表单，无法聚焦到按钮
• Firefox中按钮可正常遍历，却无法为.close元素赋予焦点

想知道如何实现从.close到各按钮按顺序的Tab遍历，以及这类场景是否有跨浏览器标准行为？

原代码示例 #

CSS代码

body {
  margin: 0;
  padding: 1rem;
  display: flex;
  justify-content: center;
}

form {
  padding: 1rem;
  background: #f7f7f7;
  display: inline-block;
}

.close {
  padding: 0.5rem;
  background: lightblue;
  display: inline-flex;
}

.item-wrapper {
  margin: 1rem 0;
}

HTML代码

<form method="POST">
  <div tabindex="0" class="close">X</div>
  <div class="board-list">
    <div class="item-wrapper">
      <button tabindex="0" class="item" name="board-name">ITEM NAME 1</button>
    </div>
    <div class="item-wrapper">
      <button tabindex="0" class="item" name="board-name">ITEM NAME 2</button>
    </div>
    <div class="item-wrapper">
      <button tabindex="0" class="item" name="board-name">ITEM NAME 3</button>
    </div>
    <div class="item-wrapper">
      <button tabindex="0" class="item" name="board-name">ITEM NAME 4</button>
    </div>
  </div>
</form>

解决方案 #

核心问题分析 #

1. button元素默认具备可聚焦性，无需额外添加tabindex="0"，多余的属性会干扰浏览器默认的Tab遍历逻辑，这是Safari出现异常的主要原因。
2. div作为非原生交互元素，仅靠tabindex="0"无法在所有浏览器中获得一致的聚焦支持，Firefox对这类元素的聚焦有更严格的语义要求。

具体修复步骤 #

1. 移除button上的tabindex="0"

原生button属于交互元素，默认会按DOM顺序被Tab键遍历，保留原生行为即可。

2. 优化.close元素的交互语义

关闭操作属于交互行为，推荐将<div>替换为<button>元素，这样能自动获得原生的聚焦、键盘支持（Enter/Space键触发），完全兼容所有浏览器。如果因需求限制必须使用div，需要补充以下设置：

• 保留tabindex="0"
• 添加role="button"明确无障碍语义
• 绑定keydown事件，支持Enter和Space键触发关闭逻辑

修复后的代码 #

CSS代码

body {
  margin: 0;
  padding: 1rem;
  display: flex;
  justify-content: center;
}

form {
  padding: 1rem;
  background: #f7f7f7;
  display: inline-block;
}

.close {
  padding: 0.5rem;
  background: lightblue;
  display: inline-flex;
  border: none;
  cursor: pointer;
}

.item-wrapper {
  margin: 1rem 0;
}

HTML代码

<form method="POST">
  <!-- 使用button元素获得原生交互支持 -->
  <button type="button" class="close">X</button>
  <div class="board-list">
    <div class="item-wrapper">
      <button class="item" name="board-name">ITEM NAME 1</button>
    </div>
    <div class="item-wrapper">
      <button class="item" name="board-name">ITEM NAME 2</button>
    </div>
    <div class="item-wrapper">
      <button class="item" name="board-name">ITEM NAME 3</button>
    </div>
    <div class="item-wrapper">
      <button class="item" name="board-name">ITEM NAME 4</button>
    </div>
  </div>
</form>

跨浏览器标准说明 #

原生交互元素（button、input等）的Tab遍历是W3C明确规定的标准行为，浏览器会严格按照DOM顺序进行遍历。问题的根源在于对非交互元素的自定义聚焦处理，不同浏览器的实现差异较大：

• Chromium对非交互元素的tabindex支持较为宽松
• Safari对表单内元素的聚焦逻辑校验严格，多余的tabindex会干扰原生按钮的遍历
• Firefox要求非交互元素必须通过role属性明确语义，才能被Tab键聚焦

使用原生交互元素是实现无障碍Tab遍历最稳妥的跨浏览器方案，既能符合无障碍规范，又能避免自定义逻辑带来的兼容性问题。

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