jquery选项卡“不能嵌套交互式控件”

Question

我使用jquery选项卡。样本代码：

<ul role="tablist">
 <li role="tab"><a class="label" href="#tabs-1" aria-label="Description tab">Description</a></li>
 <li role="tab"><a class="label" href="#tabs-2" aria-label="Reviews tab">Reviews</a></li>
 <li role="tab"><a class="label" href="#tabs-3" aria-label="Credits tab">Credits</a></li>
 <li role="tab"><a class="label" href="#tabs-4" aria-label="Cataloging tab">Cataloging</a></li>
</ul>

axe可访问性检查器标记此代码的“严重”问题：“不能嵌套交互控件”，并解释“不得具有可聚焦的后代”，并引用准则WCAG4.1.2。

据我所知，问题是在语言中有一个链接。从一个关于斧头核心(https://github.com/dequelabs/axe-core/issues/601)的Github讨论中，列表项中的可点击链接会导致屏幕阅读器出现问题。

但这似乎是jquery选项卡小部件的标准用法。如何更改选项卡小部件代码以使其可访问？

Answer 1

<ul role="tablist">中的项目将被添加到tabindex="0"等以使它们具有可聚焦性(实际的li，而不是链接)，然后锚点应该将tabindex="-1"添加到其中。

这个想法是链接是一个退路，因为如果JS失败了，这就是为什么它首先包含在其中，而不仅仅是纯文本。

但是，这确实会导致交互元素嵌套，因为现在列表项上有tabindex="0" (使其“交互式”/可聚焦)，然后在列表项中有一个链接。

他们将tabindex="-1"添加到链接中，以便将其从焦点顺序中删除，但是一些屏幕阅读器/浏览器组合仍然会选择这个链接，这就是为什么它会被标记。

因此，有一个解决办法，但您需要自己实现它。

首先，将role="none presentation"添加到链接中：

<li role="tab"><a class="label" href="#tabs-1" role="none presentation">Description</a></li>

这表明，就辅助技术而言，这个锚应该被视为<div>或<span> (它消除了所有的语义含义)。

其次，(但您必须检查它是否与jQuery一起工作)是通过JS href从链接中删除属性(因此只有在Tab组件初始化后才会删除它)。

如果在完成此操作后检查元素(忽略添加的任何类等)，您应该得到以下结果：

<li role="tab"><a class="label" role="none presentation">Description</a></li>

如果JS工作并正确加载，它将不再是一个可聚焦的项，但如果JS未能加载，它将优雅地后退。

还请注意，我删除了您的aria-label，因为您使用的role="tab"已经告诉屏幕阅读器它是一个选项卡，所以您的标签是不需要的。

因此，总结如下：

<li>

• remove JavaScript.

• remove

• 通过aria-label (与问题无关)的链接向role="none presentation"添加href属性

这应该使jQuery中的选项卡尽可能可访问，但是它可能还存在其他问题，所以我不能说它是否是可访问的！