WebAIM - Web Accessibility In Mind

E-mail List Archives

Custom tabs with a single tab panel: does it pose accessibility issues?

for

From: Erick Wilder
Date: Aug 1, 2023 1:35AM

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