CODEWITHSUNDEEP
jquerytabswcag
Anil
Anil

Reputation: 3752

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

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 enter image description here

Upvotes: 2

Views: 1340

Answers (2)

Tsundoku
Tsundoku

Reputation: 2707

The code for the active jQuery UI tab is, strictly speaking, self-contradictory. I changed the order of the attributes a bit for the sake of clarity:

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

An a element with a href attribute creates a link, and links are natively part of the focus order (or tab order). However, adding the attribute tabindex="-1" takes it out of the tabbing order. This creates a disparity between pointer behaviour (the link can still be clicked, even though the jQuery demo tries to hide this by manipulating the pointer style in CSS) and keyboard-based behaviour.

In addition, a link (since that is still how the active tab is implemented) is not decorative; it is functional, so the attribute role="presentation" is misleading here. The attribute role="presentation" can be used for decorative images and layout tables, for example. In a tabbed interface, it is better to add it to the li element that contains the link, as shown in the WAI-ARIA Authoring Practices 1.1.

One might fix this by moving role="presentation" from the a element to the containing li element, moving role="tab" from the li element to the a element, and temporarily removing/renaming the href attribute from the a element while the tab is active.

Upvotes: 1

slugolicious
slugolicious

Reputation: 17535

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.

Upvotes: 1

Related Questions