CODEWITHSUNDEEP
javascripthtmltabsaccessibility
DysphoricUnicorn
DysphoricUnicorn

Reputation: 552

What is the correct role for a tab container when only the currently active tab is included in the DOM?

According to the WAI guidelines for tabs, one should set the role tabpanel on each element that contains tabbed content and then set its triggering tab's aria-controls value to the container's ID.

This would work well in a situation where all tabs are included in the DOM and only hidden using CSS.
However, in my application I am only adding the currently selected tab's content to the DOM using JavaScript. This means that there will only be a single tabpanel in the DOM and all other tabs would have aria-controls values set to non existing IDs, which I doubt would be good practice.

So now I'm wondering: Should I set the tabpanel role at all or should I rather just set aria-controls from the tabs on the container that will end up displaying whatever tab is currently selected while adding aria-live="polite" and aria-relevant="all" to it or is there a better practice for this situation?

Upvotes: 3

Views: 1191

Answers (1)

Andy
Andy

Reputation: 6170

It‘s ok to omit the aria-control attribute, and the tablist shoupd be placed right before the tabpanels.

Conformance

From the ARIA specification on role tabpanel:

Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab.

So you can skip the aria-controls part and still be compliant.

Practical Implications

Since most screen readers don’t make anything of aria-controls right now, the best practice became simply keeping tablist and tabpanel closely together, with no contents in between.

Also from the specification:

tablist elements are typically placed near, usually preceding, a series of tabpanel elements. See the WAI-ARIA Authoring Practices for details on implementing a tab set design pattern.

This way users know to simply continue reading after changing tab, and to go back up from a tab panel to change tab. In most articles I read, this is highly recommended.

Of course we should not skip indicating semantics just because implementation is not there yet (e.g. as most developers did with inputmode). But if it poses an issue in your case, you can omit the aria-controls attribute.

Upvotes: 1

Related Questions