如何在HTML中构建带关闭控件的无障碍标签页？

你遇到的问题根源是ARIA规范明确要求：role="tab"的元素不能包含可聚焦的后代元素。tab本身作为可交互、可聚焦的控件，内部嵌套按钮会打乱键盘导航逻辑，让屏幕阅读器用户混淆操作目标，因此触发了无障碍测试告警。

下面是两种兼顾视觉需求和无障碍标准的可行方案：

方案1：将关闭按钮与Tab元素同级（推荐） #

把按钮从tab标签中移出，通过CSS布局让视觉上保持“内嵌”效果，DOM结构上两者同级，既符合规范又不破坏原有UI。

示例代码 #

<!-- 单个标签页容器 -->
<div class="tab-wrapper">
  <span role="tab" tabindex="0" aria-selected="true" aria-controls="tab-panel-1">
    标签页标题
  </span>
  <button aria-label="关闭当前标签页">×</button>
</div>

<!-- 对应的标签页内容面板 -->
<div id="tab-panel-1" role="tabpanel" aria-labelledby="tab-1">
  标签页内容...
</div>

.tab-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  padding: 6px 10px;
  margin-right: 4px;
}

.tab-wrapper [role="tab"] {
  padding: 4px;
  cursor: pointer;
}

.tab-wrapper button {
  margin-left: 8px;
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}

无障碍注意点 #

• 给关闭按钮添加aria-label，明确功能（仅用×符号屏幕阅读器无法识别）
• 动态设置tab的tabindex：选中的tab设为0，未选中的设为-1，通过JS切换状态
• 配置aria-controls和aria-labelledby，建立tab与对应tabpanel的关联，帮助屏幕阅读器理解控件关系

方案2：用绝对定位将按钮“视觉内嵌”到Tab上 #

如果业务要求按钮必须在视觉上完全包裹在tab内部，可以通过CSS绝对定位实现，DOM结构上按钮仍与tab同级，避免嵌套。

示例代码 #

<div class="tab-wrapper">
  <span role="tab" tabindex="0" aria-selected="true" aria-controls="tab-panel-2">
    标签页标题
  </span>
  <button aria-label="关闭当前标签页">×</button>
</div>

<div id="tab-panel-2" role="tabpanel" aria-labelledby="tab-2">
  标签页内容...
</div>

.tab-wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  padding: 6px 30px 6px 10px; /* 右侧留空间给按钮 */
  margin-right: 4px;
}

.tab-wrapper button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

额外优化：支持键盘快捷关闭 #

除了按钮，还可以给tab元素添加键盘事件，比如按下Delete或Backspace键关闭当前标签页，提升键盘用户的操作效率：

const tabElement = document.querySelector('[role="tab"]');
const closeButton = tabElement.nextElementSibling;

tabElement.addEventListener('keydown', (e) => {
  if (e.key === 'Delete' || e.key === 'Backspace') {
    closeButton.click();
  }
});

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