如何解决axe工具检测到的tablist含separator角色的无障碍问题？

我正尝试解决axe工具检测到的tablist无障碍问题。我们的tablist标签间使用带合适role和aria-orientation的垂直分隔符，但工具提示role=separator不允许存在于role=tablist元素内。

axe工具提示：

Ensures elements with an ARIA role that require child roles contain them
翻译：确保具有要求子角色的ARIA角色的元素包含相应子角色

原代码示例（已修正语法错误） #

<div role="tablist" aria-orientation="horizontal">
  <button id="tab-0" aria-controls="panel-0" type="button" role="tab" tabindex="0" aria-selected="true">One</button>
  <div class="vertical-separator">
    <div class="tab-separator" role="separator" aria-orientation="vertical"></div>
  </div>
  <button id="tab-1" aria-controls="panel-1" type="button" role="tab" tabindex="-1" aria-selected="false">Disabled</button>
</div>

请问如何满足无障碍规则？工具给出两个建议：

Element has children which are not allowed (see related nodes)
翻译：元素包含不允许的子元素（查看相关节点）
Element has no aria-busy="true" attribute
翻译：元素没有aria-busy="true"属性

但这两个建议都不适用。

可行解决方案 #

1. 用CSS伪元素实现分隔线（推荐）

直接移除HTML中的分隔符元素，通过CSS伪元素给tab按钮添加垂直分隔线样式。这样tablist下只有合法的tab子元素，完全符合ARIA规范，不会触发axe错误。

示例代码：

<div role="tablist" aria-orientation="horizontal" style="display: flex; align-items: center; gap: 16px;">
  <button id="tab-0" aria-controls="panel-0" type="button" role="tab" tabindex="0" aria-selected="true">One</button>
  <button id="tab-1" aria-controls="panel-1" type="button" role="tab" tabindex="-1" aria-selected="false">Disabled</button>
</div>

对应的CSS：

/* 给除最后一个tab外的按钮添加右侧分隔线 */
[role="tab"]:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 20px;
  background-color: #ccc;
  margin-left: 16px;
}

2. 将分隔符移出tablist容器

如果必须保留HTML结构的分隔符，把包含分隔符的<div class="vertical-separator">移到tablist外面，通过CSS布局（比如flex）让它视觉上处于tab之间。这种方法需要额外调整布局，不如伪元素方案简洁。

示例代码：

<div style="display: flex; align-items: center;">
  <div role="tablist" aria-orientation="horizontal" style="display: flex; align-items: center;">
    <button id="tab-0" aria-controls="panel-0" type="button" role="tab" tabindex="0" aria-selected="true">One</button>
  </div>
  <div class="vertical-separator">
    <div class="tab-separator" role="separator" aria-orientation="vertical"></div>
  </div>
  <div role="tablist" aria-orientation="horizontal" style="display: flex; align-items: center;">
    <button id="tab-1" aria-controls="panel-1" type="button" role="tab" tabindex="-1" aria-selected="false">Disabled</button>
  </div>
</div>

注意：这种方式需要确保tab的键盘导航逻辑不受影响，可能需要额外处理焦点管理。

3. 添加axe规则例外（不推荐）

如果确认当前分隔符不影响实际无障碍体验，可以在axe检测配置中添加该规则的例外。但这是妥协方案，优先保证HTML结构符合规范才是最佳实践。

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