Open zelliott opened 2 years ago
I think it is a bug that aria-controls points to a container that is not visible (display:none). I would use aria-controls only on the active tab. Besides, aria-controls has little relevance (see https://github.com/w3c/aria/issues/995).
So then you would consider Alternative 1 to be the "most correct" out of the structures above?
I think it is a bug that aria-controls points to a container that is not visible (display:none).
If the other APG maintainers agree, then we should update the tabs example accordingly.
If there would be a screen reader support of aria-controls, the first variant is much better. With the second one I would refer from the not active tab to the wrong tabpanel.
Most tab widgets seem to have the following DOM structure (note that throughout these examples some important DOM attributes are omitted for brevity):
Note that the first tab is selected, and thus the second panel is hidden from the page with the
.is-hidden
class (which applies something likedisplay: none
to the element).In my case, it's difficult to render multiple
tabpanel
elements. Instead, the content within the singletabpanel
element dynamically updates based upon the selected tab. Thus, I'm wondering if there are any accessibility concerns with either of the following two alternative DOM structures:Alternative 1
aria-controls
to the active tab (JavaScript toggles the attribute on tab selection).tabpanel
element with a static id (e.g.my-panel
) and havearia-controls
always point to that id.When first tab is selected:
When second tab is selected:
Alternative 2
aria-controls
to both tabs, but have them both point to the sametabpanel
.tabpanel
element with a static id.tabpanel
contents dynamically change.When first tab is selected:
When second tab is selected:
Alternative 2 is what I have today, but it was brought to my attention that it could be confusing for an unselected tab's
aria-controls
to point to the activetabpanel
. This seemed like a valid concern, but at the same time, in the canonical examples of tab widgets, the unselected tab'saria-controls
points to nothing altogether (as it points to atabpanel
that's hidden with.is-hidden
and thus not accessible to SRs). Changing from alternative 2 to alternative 1 seemed like it would address this concern, but I wasn't sure if it would be problematic from a SR point-of-view to be dynamically adding/removingaria-controls
attributes. Any thoughts would be greatly appreciated - thanks!