WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Custom tabs with a single tab panel: does it poseaccessibility issues?

for

From: tim.harshbarger@deque.com
Date: Aug 1, 2023 9:37AM

It should be OK to do that.

There may be a difference in the implementation.

In a situation where all the tab panels exist in the DOM, you can set the aria-controls attribute to point to the relevant tab panel for each tab.

In a situation where the tab panels only exist in the DOM when a tab is selected, you will want to add an aria-controls attribute only to the currently selected tab.

Thanks,
Tim
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Erick Wilder
Sent: Tuesday, August 1, 2023 2:36 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Custom tabs with a single tab panel: does it pose accessibility issues?

Hello everyone,

I’ve come across many implementations of a custom tab and tab panels. Most of them uses a combination of multiple elements in the DOM, each tab assigning a aria-controls attribute to a different ID of an element with role=tabpanel

With frameworks and libraries like React it is often the case that elements are not simply removed from the accessibility tree (e.g using display:
none, or aria-hidden attribute) but elements are removed from the DOM

I have come across this implementation of a tab and tab panel that uses a single tab panel, and conditionally removes and assigns the aria-controls attribute to the currently selected tab (e.g. aria-selected=true).

I wonder if this may pose accessibility issues because the contents of the element with role=tabpanel and the aria-controls attribut of the tabs change programmatically. Is my concern valid? Is it better to stick to multiple tab panels, each with its unique id and use CSS to remove the inactive ones from the accessibility tree?

Thanks and have a great week.
--
Enviado do Gmail para celular