jquery tab wcag accessiblity: role presentation is not allowed for given element; Ensures role attribute has an appropriate value for the element

Question

Jquery tab is adding role="presentation" to anchors and as per axe tool , it is WCAG violation, how to fix this?

Element source

<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多余的“ expanded” /“ collapsed”公告除外）。

所以最终结果是它起作用了。链接具有role="presentation"的事实并不是一个错误。您应该为此contact aXe。斧头努力不给别人误报，他们善于回答问题。

Answer 2

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

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

具有a属性的href元素会创建一个链接，链接本身就是焦点顺序（或Tab键顺序）的一部分。但是，添加属性tabindex="-1"会使它脱离跳格顺序。这会在指针行为和基于键盘的行为之间产生差异（即使jQuery演示试图通过处理CSS中的指针样式来隐藏该链接，仍然可以单击链接）。

此外，链接（由于仍然是活动选项卡的实现方式）不是装饰性的；它是功能，因此属性role="presentation"在这里具有误导性。例如，属性role="presentation"可用于装饰图像和布局表。在选项卡式界面中，最好将其添加到包含链接的li元素中，如WAI-ARIA Authoring Practices 1.1所示。

通过将role="presentation"从a元素移动到包含的li元素，将role="tab"从li元素移动到{{ 1}}元素，并在选项卡处于活动状态时从a元素中临时删除/重命名href属性。