jquery选项卡wcag可访问性：给定元素不允许角色表示；确保“角色”属性对元素具有适当的值

Jquery正在向锚添加

role=“presentation”

，根据工具，这是违反WCAG的行为，如何修复

元素源

<a href="#tabs-1" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Nunc tincidunt</a>

要解决此冲突，您需要：修复以下内容：角色 给定元素不允许显示

---

从技术上讲，我可以将

role=“presentation”

放在我想要的任何元素上。但是，通过这样做，它使元素成为非语义元素（链接实质上成为一个非语义元素）。拥有不再是链接的链接可能有一个合理的原因，但在本例中，我认为jquery使用了错误类型的元素。有一个失去语义的链接，和制表位被删除（

tabindex

设置为-1）有什么意义？只需使用一个按钮即可

通过在

上设置

tabindex

，可以控制选项卡

jqueryui选项卡还在选项卡本身上设置

aria expanded

，这是错误的。它只需要选择

aria

（它是设置的）。选项卡没有展开任何内容

但是，使用jqueryui选项卡的屏幕阅读器体验非常类似于。也就是说，我在使用jquery选项卡和W3选项卡时听到了相同的通知（除了jqueryui多余的“扩展”/“折叠”通知）

---

所以最终的结果是它起作用了。链接具有

role=“presentation”

这一事实并不是真正的错误。你应该考虑一下。aXe努力不给出误报，而且他们很擅长回答问题。

严格来说，活动jQuery UI选项卡的代码是自相矛盾的。为了清晰起见，我稍微更改了属性的顺序：

<a href="#tabs-1" tabindex="-1" 
role="presentation"
class="ui-tabs-anchor" id="ui-id-1"
>Nunc tincidunt</a>

带有

href

属性的

a

元素创建链接，链接是焦点顺序（或选项卡顺序）的固有部分。但是，添加属性

tabindex=“-1”

会使其脱离选项卡顺序。这在指针行为（尽管jQuery演示程序试图通过操纵CSS中的指针样式来隐藏链接，但仍然可以单击链接）和基于键盘的行为之间造成了差异

此外，链接（因为这仍然是活动选项卡的实现方式）不是装饰性的；它是功能性的，因此属性

role=“presentation”

在这里具有误导性。例如，属性

role=“presentation”

可用于装饰性图像和布局表。在选项卡式界面中，最好将其添加到包含链接的

li

元素中，如中所示

---

可以通过将

role=“presentation”

从

a

元素移动到包含

li

元素，将

role=“tab”

从

li

元素移动到

a

元素来解决此问题，并在选项卡处于活动状态时临时从

a

元素中删除/重命名

href

属性。

在axe论坛中询问了您提出的问题，感谢您的回复。有兴趣听到他们的回复，请回复：，回复：对我来说，这看起来像一个bug，因为该链接还有tabindex=“-1”。你能在Github上提交一个问题吗？