jquery-ui tab "Interactive controls must not be nested"

Question

I use jquery-ui tabs. Sample code:

<ul role="tablist">
 <li role="tab"><a class="label" href="#tabs-1" aria-label="Description tab">Description</a></li>
 <li role="tab"><a class="label" href="#tabs-2" aria-label="Reviews tab">Reviews</a></li>
 <li role="tab"><a class="label" href="#tabs-3" aria-label="Credits tab">Credits</a></li>
 <li role="tab"><a class="label" href="#tabs-4" aria-label="Cataloging tab">Cataloging</a></li>
</ul>

The axe-core DevTools accessibility checker flags a "serious" problem with this code: "Interactive controls must not be nested", with the explanation "Interactive control elements must not have focusable descendants" and referencing guideline WCAG 4.1.2.

The problem, as I understand it, is that there is a link inside the listitem. From a Github discussion for axe-core (https://github.com/dequelabs/axe-core/issues/601), the clickable link within the list item causes issues with screen readers.

But this seems like a standard use of the jquery-ui tab widget. How I do change the tabs widget code to make it accessible?

Answer 1

The items within <ul role="tablist"> will have tabindex="0" etc. added to them in order to make them focusable (the actual li, not the link) and then the anchor should have tabindex="-1" added to it.

The idea is that the link is a fallback for if JS fails, this is why it is included in the first place and isn't just plain text.

However this does indeed cause nesting of interactive elements as you now have tabindex="0" on the list item (making it "interactive" / focusable) and then a link within it.

They add tabindex="-1" to the link to remove it from the focus order, but some screen reader / browser combos will still pick this link up and this is why it is flagged.

So there is a workaround but you will need to implement it yourself.

First, add role="none presentation" to the link:

<li role="tab"><a class="label" href="#tabs-1" role="none presentation">Description</a></li>

What this does is signal that this anchor should be treated like a <div> or a <span> as far as assistive technology is concerned (it removes all semantic meaning).

Secondly, (but you would have to check it works with jQuery-UI) would be to remove the href attribute from the link via JS (so it is only removed once the Tab component has initialised).

You should end up with the following if you inspect the elements after doing this (ignoring any classes added etc.):

<li role="tab"><a class="label" role="none presentation">Description</a></li>

This will stop it being a focusable item if JS works and loads correctly, but will fall back gracefully if JS fails to load.

Also notice I removed your aria-label as the fact you are using a role="tab" already tells a screen reader that it is a tab so your label was not needed.

So in summary:

• add role="none presentation" to the links within the <li>
• remove the href attribute from the links via JavaScript.
• remove the aria-label (not related to the problem)

This should make the tabs as accessible as possible within jQuery-UI, but there may be other problems with it so I can't say whether it is accessible or not!