WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple tabs

for

From: tim.harshbarger@deque.com
Date: Jul 18, 2023 8:05AM

If all the tabs in both groups display their content in the same location and also replace the content displayed by any other tab selected in either group, then just make all 6 tab buttons a single tab group. This will simplify the problem because most screen reader users who have encountered tab controls before will assume that the content for the tab panel starts immediately after the last tab in the group.

If your concern is that screen readers might not know that new content is displayed, make sure the selected state of the tab panel is conveyed to the user. Again, screen reader users who have encountered tab controls will assume that if the screen reader indicates a tab is currently selected, the content below will have changed to reflect that.

if your concern is that the screen reader user will not know when they have found the tab panel, there are some techniques you can use to help with this. One technique is to place a heading at the beginning of the tab panel that reflects the name of the tab. Another is to wrap the tab panel in a landmark region whose name reflects the name of the selected tab.

If you absolutely must ensure the tab buttons are in 2 seperate groups, then make sure to use the techniques I mentioned above for the tab panels. However, if the only reason the tab buttons are in 2 seperate groups is because they reflect different categories of things, still make them a single tab group but just use the accessible name for each tab button to reflect that additional information.

If you do use live regions, don't have the live region announce all the contents of the tab panel when the user selects a new tab. if the only information you are trying to convey with a live region is that the contents for the tab panel have changed, then communicate exactly that information. Certainly reading all the new contents does something similar, but it is not a great user experience if the only thing the person needs to know is that the contents were updated. When you have the live region read all the contents, the screen reader user typically figures that out after the first couple of words. They don't need to know all the details of the content to figure that out.

Thanks,
Tim
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of <EMAIL REMOVED>
Sent: Tuesday, July 18, 2023 4:02 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Multiple tabs

Sumit,

To inform screen reader users about the updated contents that load below after selecting a button, you can use ARIA live regions. A live region can be dynamically updated to announce changes to the content. In your case, when a button is selected, you can update the corresponding live region with the relevant content.

To implement this, you can add an ARIA live region attribute, such as `aria-live="polite"`, to the container element where the updated content will appear. This will notify screen readers to announce the changes made to that region. Additionally, you can also consider using ARIA attributes like `aria-atomic` and `aria-relevant` to provide more specific information about how the live region should behave.

Relevant success criteria to consider for this scenario include:

1. SC 1.3.3 - Sensory Characteristics: Ensure that instructions, such as how to interact with controls and receive updates, are provided in a way that is perceivable to all users, including those using assistive technologies.
2. SC 2.4.3 - Focus Order: Ensure that the focus order of interactive elements is logical and intuitive.
3. SC 4.1.3 - Status Messages: Ensure that status messages, such as the updated content in this case, are conveyed to screen reader users in a way that can be programmatically determined.

And that is not the only issue
Does it indicate what the button label A, B, C Or 1, 2, 3 or actually four? That itself is a different issue all together.

Dean Vasile


617-799-1162

> On Jul 17, 2023, at 11:56 PM, Sumit Patel < <EMAIL REMOVED> > wrote:
>
> 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 ?