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

Technically, I can put role="presentation" on any element that I want. However, by so doing, it makes the element a non-semantic element (the link essentially becomes a <span>). There could be a valid reason for having a link that is no longer a link, but in this case, I think jquery is using the wrong type of element. What's the point of having a link that loses its semantic meaning and the tab stop is removed (tabindex is set to -1)? Just use a <span> instead.

The tabbing appears to be controlled by setting tabindex on the <li>.

The jqueryui tab is also setting aria-expanded on the tab itself, which is wrong. All it needs is aria-selected (which it is setting). The tab is not expanding anything.

However, the screen reader experience of using the jqueryui tab is very similar to the tab on the W3 page. That is, I hear the same announcements when using the jquery tab and the W3 tab (except for the superfluous "expanded"/"collapsed" announcements by jqueryui).

So the end result is that it works. The fact that the link has role="presentation" is not really an error. You should contact aXe regarding that. aXe tries hard not to give false positives and they are good about replying to problems.