如何修复 role="tablist"/role="tab" Axe 违规问题？

Question

我们的页面上有一些具有以下结构的选项卡：

<ul role="tablist">
  <li>
    <div role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
  </li>
  <li>
    <div role="tab">Second tab content...</div>
  </li>
</ul>

在运行 Axe 可访问性测试时，这会导致两个违规，即： <li> elements must be contained in a <ul> or <ol>、 和Certain ARIA roles must contain particular children（反之亦然，某些子级需要特定的父级角色）。

据我了解，第一次违规是由于tablist角色<ul>不再被视为<ul>. 我不明白第二个违规行为，因为规范没有强制 的元素role="tab"是 的直接子元素tablist。

防止这些违规行为的一种可能的解决方法是升级role="tab"到<li>元素。但问题是一个不同的违规：Nested interactive controls are not announced by screen readers，因为所包含的内容<div>可能是可聚焦的。将其更改为外部<li>将需要大量的 js 和 css 更改，因此这不是一个简单的修复。

这在多大程度上确实需要修复？最好的方法是什么？

Answer 1

斧头错了 该角色的规格tab说明：

作者必须确保具有角色的元素tab包含在具有角色的元素中，或由具有角色的元素拥有tablist。

强调我的。请注意，这表示 atab必须包含在a中tablist。 包含在并不意味着直系孩子，而是后裔。

如果您查看下一个短语或拥有者，这一点会得到进一步强调。“拥有”有一个定义：

“拥有的元素”是该元素的任何 DOM 后代，任何通过 via 指定为子元素的元素aria-owns，或者拥有的子元素的任何 DOM 后代。

再说一遍，只要 atab是 a 的后代tablist（子、孙、曾孙等），那么从技术上讲它就是有效的，而 axe 是错误的。

现在，“拥有”的定义为您提供了一个线索，告诉您如何解决 axe 的错误，以防违规行为困扰您。添加aria-owns到 your<ul>并将其指向tab元素（你的<div>s）。您的原始代码将像这样传递 ax：

<ul role="tablist" aria-owns="foo1 foo2">
  <li>
    <div id="foo1" role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
  </li>
  <li>
    <div id="foo2" role="tab">Second tab content...</div>
  </li>
</ul>

<li>您仍然遇到 a未包含在 a 中的问题<ul>。@graham 涵盖了那部分。我也同意 @graham 的观点，即您应该遵循选项卡设计模式的创作实践。