E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Laurence Lewis
Date: Thu, Apr 27 2023 3:02AM
Subject: Accordion Group and Role Region
No previous message | Next message →

Surrounding the entire accordion group region with role=region and having
the heading inside the container with aria-labelledby matches the paradigm
for ARIA Region usage.


The landmark Role Region enables the screen reader user to perceive the
boundaries of each accordion group.


But, is this best accessibility practice?

From: Geethavani.Shamanna
Date: Thu, Apr 27 2023 6:51AM
Subject: Re: Accordion Group and Role Region
← Previous message | Next message →

Since screen reader users can navigate accordions using either the hotkey for headings or the hotkey for buttons, having them encased within separate regions may not majorly enhance their experience.

Geetha

From: glen walker
Date: Thu, Apr 27 2023 9:59AM
Subject: Re: Accordion Group and Role Region
← Previous message | Next message →

As Geetha said, you generally don't need a region container around the
accordion since a user can navigate by heading or button. However, if you
have several accordions on your page and you want to distinguish them from
each other and allow the user to quickly navigate to each accordion, then a
region might make sense.

If the user navigates by heading or button, they'll have to go through each
heading or button in each accordion (as well as any other headings or
buttons on the page) before getting to the next accordion. Navigating by
region (assuming it has an accessible name) could make it faster to
navigate directly to the accordion and bypass all the headings and buttons
within each accordion. But that also assumes you don't have regions around
other parts of the page that might get in the way of navigating to the next
accordion region.

From: Steve Green
Date: Thu, Apr 27 2023 10:28AM
Subject: Re: Accordion Group and Role Region
← Previous message | Next message →

Grouping has other benefits. If you give the group a sensible name, a screen reader user will know they are entering an accordion before they even get there. If you don't group it, the user will have to work out what it is. Remember that they don't have a holistic view of the page like sighted people do. They encounter one element at a time and have to progressively build up a mental model of the content. Anything you can do to help them see ahead is useful. This only happens with a few elements, such as lists, fieldsets, tables and groups.

Also, the group and its name will be announced if the user jumps to somewhere in the middle of the group or if they navigate backwards into it. This can help orientate them and provide some content about where they have landed.

Steve Green
Managing Director
Test Partners Ltd

From: wolfgang.berndorfer
Date: Fri, Apr 28 2023 8:28AM
Subject: Re: Accordion Group and Role Region
← Previous message | Next message →

Consider grouping the compartments of the accordion in a list!
<ul style="list-style-type: none; " >
Benefit:
The screen reader announces the *number* of compartments in the accordion.
Disadvantage (?):
You cannot use aria-label on <ul>, so you have to put the accordion under a heading which might be a promising idea anyway. (The aria-label-content is only available for AT.)

Wolfgang

From: glen walker
Date: Fri, Apr 28 2023 4:00PM
Subject: Re: Accordion Group and Role Region
← Previous message | Next message →

Just be careful when you remove the list style via CSS, Apple considers the
element "not a list" anymore and you won't hear the metadata announced of
how many items are in the list, which was the whole point of adding a list.

Fortunately, you can work around it by adding the list role back to the
list. It looks unnecessary so make sure you comment your code accordingly.

<ul style="list-style-type: none;" role="list">


On Fri, Apr 28, 2023 at 8:28 AM < = EMAIL ADDRESS REMOVED = > wrote:

> Consider grouping the compartments of the accordion in a list!
> <ul style="list-style-type: none; " >
> Benefit:
> The screen reader announces the *number* of compartments in the accordion.
> Disadvantage (?):
> You cannot use aria-label on <ul>, so you have to put the accordion under
> a heading which might be a promising idea anyway. (The aria-label-content
> is only available for AT.)
>
> Wolfgang
>
>

From: Laurence Lewis
Date: Fri, Apr 28 2023 10:43PM
Subject: Re: Accordion Group and Role Region
← Previous message | No next message

Thanks for the responses. My takeaway is, If multiple accordions are
present, it makes sense to provide a named region for each accordion group.
There seems to be more pros than cons.

Each accordion group needs a group heading, regardless of whether the group
is a named region or not.

Laurence

On Sat, 29 Apr 2023 at 4:00 am, < = EMAIL ADDRESS REMOVED = >
wrote:

> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS REMOVED =
>
> To subscribe or unsubscribe via the World Wide Web, visit
> https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> = EMAIL ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS REMOVED =
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. Re: Section 508 training/conference (Morin, Gary (NIH/NCI) [E])
> 2. Re: Section 508 training/conference (Ryan E. Benson)
> 3. Re: Accordion Group and Role Region
> ( = EMAIL ADDRESS REMOVED = )
>
>
>
> ---------- Forwarded message ----------
> From: "Morin, Gary (NIH/NCI) [E]" < = EMAIL ADDRESS REMOVED = >
> To: Claire Forbes < = EMAIL ADDRESS REMOVED = >, " = EMAIL ADDRESS REMOVED = " <
> = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 27 Apr 2023 23:13:08 +0000
> Subject: Re: [WebAIM] Section 508 training/conference
> Hi, Claire,
> The GSA Section 508 interagency forum is always great! But then I have
> been on the planning committee for years. Would be happy to share my
> thoughts with you anytime - it's well worth attending. It'll be hybrid
> this year, in-person in Arlington VA and virtual.
>
> Gary
>
>
> Gary M. Morin, NCI Section 508 Coordinator
> (240) 276-6920 Office; (301) 980-9649 Home/Cell
> WebEx: https://cbiit.webex.com/join/MorinG
>
> Accessibility – Habit, not Hindsight
>
> In Shady Grove on Tuesdays
>
>
> Looking for new information on Acquisitions and Section 508?
> Federal Acquisition Regulation: Section 508-Based Standards in Information
> and Communication Technology (August 11, 2021)
> https://www.federalregister.gov/documents/2021/08/11/2021-16363/federal-acquisition-regulation-section-508-based-standards-in-information-and-communication
>
>