WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Multiple tabs

for

From: Dean.Vasile
Date: Jul 18, 2023 3:02AM

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 ?