WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Steve Green
Date: Aug 1, 2023 4:05AM

I have seen this coding method too, and it's horrible, stupid and unnecessary. I have no idea why they do stuff like this, other than to show off.

That said, it is probably WCAG conformant. It might fail SC 4.1.1 because there are tabs that don't have a corresponding tabpanel, but of course 4.1.1 will disappear from WCAG 2.2.

Adding and removing content from the DOM like this can cause corruption of a screen reader's virtual object model, and I have seen that many times. It usually manifests itself as a loss of focus position. However, although this is obviously an accessibility issue it's not a WCAG non-conformance. The behaviour may not even be consistent between machines or screen reader versions.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Erick Wilder
Sent: Tuesday, August 1, 2023 8: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