WebAIM - Web Accessibility In Mind

E-mail List Archives

Multiple tabs

for

From: Sumit Patel
Date: Jul 17, 2023 9:55PM

Hai all,

I have 2 group of buttons in my page which is arranged in single line.
For example: first set of buttons are - A, B, C
second set of buttons are - 1, 2, 3
All these 6 buttons are in single line The first set is in left side
and the other is in right side.
By default, no buttons are selected.
If you select any of these 6 buttons, related content will be updating
just below to this single line.
If you select button A first , then A related content will be
updating. then if you go and select 1 , A related contents will be
removed and 1 related content loads .

Here , focus order (both arrow and tab) is first goes to the 1st group
of buttons , then the 2nd group of button and then to the area where
the contents load.

My doubt is how can we inform screen reader users that contents loaded
below after selecting the button . Because, when they select any
buttons from the first group, user can't see the updated contents just
below to it. the related contents would have loaded only after the 2nd
group of buttons .

I thought to ask "tab" role and related properties . but, I think when
screen reader user listen "tab" they expect tab panel contents would
be available just after the 1st tab group. But, here that is not the
scenario as the tab panel contents available only after the 2nd tab
group.

What would be the right solution ?

Regards,
Sumit.