role="tab" 必须是role="tablist" 的直接子级吗？

Question

我有一个手风琴，其结构如下：

<section... role="tablist">
  <div>
    <h3 role="tab">Title</h3>
    <div role="tabpanel">
    ...
    </div>
  </div>
</section>

tab 是否必须是 tablist 的直接子级才能符合 wai aria 最佳实践，还是可以包裹在 div 中？

Answer 1

作者必须确保具有角色选项卡的元素包含在具有角色选项卡列表的元素中或由其拥有。

^{https://www.w3.org/TR/wai-aria-1.1/#tab}

因此你的例子是正确的。

我建议您仔细阅读规范，以确保您遵循最佳 ARIA 实践。

例如，在

role

上添加

div

，而不是

section

元素，按照最佳实践示例。

Answer 2

它不一定是直系孩子。只要是“的后代”就有效。

您的

<div>

在辅助功能树中没有

role

，因此它不会影响辅助功能体验。 （如果您使用的元素确实具有特定的辅助功能角色，那么您可以使用

role="none"

或

role="presentation"

覆盖它。）

有效示例：

<ul role="tablist">
  <li role="none">
    <a id="tab-1" href="#panel-1" role="tab" aria-selected="true" aria-controls="panel-1" tabindex="0"> Tab 1 </a>
  </li>

  <li role="none">
    <a id="tab-2" href="#panel-1" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1"> Tab 2 </a>
  </li>

  ...

</ul>

<div class="tab-panels">
  <section id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
    Panel content
  </section>

  <section id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
    Panel content
  </section>

  ...

</div>