jquery 选项卡 wcag 可访问性 : role presentation is not allowed for given element; Ensures role attribute has an appropriate value for the element

Question

Jquery tab正在将 role="presentation" 添加到 anchor 并按照 axe工具，违反了 WCAG，如何解决这个问题？

元素来源

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

To solve this violation, you need to: Fix the following: role presentation is not allowed for given element

Answer 1

从技术上讲，我可以将 role="presentation" 放在我想要的任何元素上。然而，这样做会使该元素成为非语义元素(链接本质上变成了 )。链接不再是链接可能有正当理由，但在这种情况下，我认为 jquery 使用了错误类型的元素。如果链接失去了语义并且制表位被删除(tabindex 设置为 -1)，那么有什么意义呢？只需使用 即可。

选项卡切换似乎是通过在

上设置 tabindex 来控制的。

jqueryui 选项卡还在选项卡本身上设置 aria-expanded ，这是错误的。它所需要的只是aria-selected(它正在设置)。该选项卡没有展开任何内容。

但是，使用 jqueryui 选项卡的屏幕阅读器体验与 tab on the W3 page 非常相似。 。也就是说，我在使用 jquery 选项卡和 W3 选项卡时听到相同的公告(除了 jqueryui 多余的“展开”/“折叠”公告)。

所以最终的结果是它有效。该链接具有 role="presentation" 的事实并不是真正的错误。你应该contact aXe关于这一点。 axe 努力不给出误报，并且他们善于回复问题。