Shift + Tab反向导航跳过元素问题求助

问题现象 #

使用Tab正向遍历页面交互式元素时，带link_class的<a>元素和带button类的<button>元素都能正常获取焦点；但按下Shift+Tab反向导航时，会直接跳过<button>元素，跳转至上一个<a>元素。环境为Windows系统下的Chrome、Edge浏览器。

相关代码片段：

<div class="container">
    <a href="link.html" class="link_class">
        <span class="text">
            Layouts
        </span>
    </a>
    <button class="button"></button>
</div>
<div class="container">
    <a href="link.html" class="link_class">
        <span class="text">
            Shop
        </span>
    </a>
    <button class="button"></button>
</div>

可能原因及解决方法 #

1. 空元素的浏览器行为差异 #

Chrome和Edge对无内容的空按钮在反向焦点导航时可能存在识别异常，浏览器会默认判定这类元素无交互价值而跳过。

解决方法：给按钮添加语义化标识或不可见占位内容：

• 添加aria-label提供无障碍语义，同时加入空占位元素：

<button class="button" aria-label="对应操作说明"><span aria-hidden="true">&nbsp;</span></button>

• 或者通过CSS伪元素添加不可见占位：

.button::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1px;
  visibility: hidden;
}

2. 焦点顺序被CSS/JS干扰 #

检查是否存在以下情况：

• 按钮被设置了tabindex="-1"（会将元素移出默认焦点流），需显式设置tabindex="0"确保其在正常焦点序列中：

<button class="button" tabindex="0"></button>

• 按钮被添加了pointer-events: none或visibility: hidden等影响交互的CSS属性，需移除这类设置。
• 页面中有自定义键盘事件监听，阻止了Shift+Tab的默认行为，需检查JS代码中是否存在针对Shift+Tab的event.preventDefault()逻辑。

3. 容器布局的焦点遍历影响 #

部分复杂布局（如flex/grid）可能导致浏览器焦点计算异常，可尝试给容器临时添加tabindex="0"后再移除（强制浏览器重新计算焦点顺序），或调整布局结构确保按钮和链接在DOM流中的顺序与视觉顺序一致。

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