如何修复role=tablist/role=选项卡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

斧头是错的。spec for the tab role说：

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

重点是我的。请注意，这说明tab必须是包含在a tablist中的。中包含的并不是直接的子级，而是子级。

如果你看下一个短语，or owned by，这一点会得到进一步强调。"Owned“有一个definition

'owned element‘是拥有元素的任何DOM后代，通过aria-owns指定为子元素的任何元素，或拥有的子元素的任何DOM后代。

同样，只要tab是tablist的后代(孩子、孙子、曾孙等)，那么从技术上讲，它是有效的，axe是错误的。

现在，“拥有”的定义给你提供了一个线索，让你知道如何解决axe的bug，以防违规行为困扰你。将aria-owns添加到您的<ul>并将其指向tab元素(您的<div>)。您的原始代码将像这样传递axe：

<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>

您仍然存在<ul>中不包含的<li>的问题。@graham覆盖了这一部分。我也同意@graham的观点，你应该遵循authoring practice for the tab design pattern。

Answer 2

对于您当前的设置，答案是从<li>中删除语义含义。

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

role="none presentation"删除了<li>中的所有语义(所以现在可以把它想象成一个<div> )。

不过，最好是将所有内容“上移一级”，以保持DOM的整洁，因此更好的解决方案可能是：

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

这将会起作用，因为您现在已经更改了<ul>和<li>的语义含义，尽管它可能需要对CSS稍作调整。

另外，Axe有时会抱怨第一个例子，即使它是有效的，第二个例子也不会有来自自动检查器的抱怨。

或者，您可能希望考虑使用<button>元素来创建选项卡，有关如何构建选项卡的信息，请参阅the tabs example on W3。

它的优点是，click处理程序可用于鼠标和键盘交互，因为您使用的是<button>。