关于aria角色tablist的合规性疑问：子元素是否仅允许tab

核心问题拆解与解答 #

1. tablist内部是否只允许包含tab元素？ #

ARIA规范明确要求，tablist的无障碍树直接子节点必须是tab角色元素，但DOM结构中可以存在包装元素或辅助交互元素，前提是这些元素不会破坏tablist的语义结构：

• 若tablist的直接DOM子元素不是tab角色（比如你示例中的<li>），会导致无障碍树中tablist的子节点是listitem（<li>的隐式角色），这违反了规范要求，辅助技术可能无法正确识别标签列表结构。
• 示例中的<button>作为交互元素会被加入无障碍树，若未做特殊处理，会干扰辅助技术对tablist的语义解析，让用户混淆标签列表的功能边界。

2. 规范中tablist的「允许无障碍子角色」为tab，是否适用于隐式角色？ #

原生HTML元素中没有隐式具备tab角色的元素，tab是纯ARIA角色，必须通过显式设置role="tab"来声明。因此规范里的“允许无障碍子角色为tab”，仅针对显式设置tab角色的节点（目前无原生隐式符合的情况）。

3. 将tab角色移至

上，疑问是否就不存在了？ #

把role="tab"移到<li>上后，tablist的直接无障碍子节点变成了tab角色的<li>，这解决了“tablist子节点不符合规范”的核心问题，但仍需处理内部的<button>：

• 此时<button>是tab角色元素的子节点，属于标签的辅助操作按钮，需要确保它的无障碍语义清晰：比如添加aria-label="关闭当前标签"，让辅助技术用户明白按钮功能。
• 同时要保证键盘导航逻辑正确：比如当焦点在<li role="tab">上时，用户可以通过合理的键盘操作（如Tab键）访问关闭按钮，避免破坏标签列表的默认键盘交互（如左右箭头切换标签）。

优化后的示例DOM #

<ul role="tablist">
   <li role="tab">
     <a href="#">My Tab</a>
     <button class="close" aria-label="关闭当前标签">X</button>
   </li>
</ul>

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