WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accordion Group and Role Region

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
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Laurence Lewis
Sent: 27 April 2023 10:03
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Accordion Group and Role Region

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

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: 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


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Thursday, April 27, 2023 5:00 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accordion Group and Role Region

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: wolfgang.berndorfer@zweiterblick.at
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

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Steve Green
Sent: Thursday, April 27, 2023 6:28 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accordion Group and Role Region

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


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Thursday, April 27, 2023 5:00 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accordion Group and Role Region

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: 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
>
> -----Original Message-----
> From: Claire Forbes < = EMAIL ADDRESS REMOVED = >
> Sent: Wednesday, April 26, 2023 2:29 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Section 508 training/conference
>
> Hello! What in-person/online trainings or conferences is everyone
> participating in?
>
> I've completed DHS Trusted Tester in 2020 (I'd love a refresh/update),
> WebAIM's virtual web accessibility training, and a bunch of various other
> online webinars ... but naturally, I'm looking for more, what can you folks
> suggest?
>
> Also, I saw the Annual Interagency Accessibility Forum is scheduled for
> Nov 7-9, 2023 https://www.section508.gov/iaaf/ - has anyone previously
> attended this?
>
> Thank you so much!
> Claire
>
>
> Claire Forbes
> Training & Section 508 Specialist
>
> Victor 12, Inc.
> 2420 Lakemont Ave. Suite 175
> ​Orlando, Fl. 32814
>
> Tel: 407-612-6011 x119
> Fax: 407-985-1980
> Web: www.victor12.com
>
> CVE SDVOSB | VOSB | GSA Multiple Award Schedule (MAS) GS‑02F‑087BA This
> message is for the designated recipient only and may contain privileged,
> proprietary, or otherwise private information. ​ ​If you have received
> this message in error, please notify the sender immediately and delete the
> original. Any other use of the email by you is prohibited.
>
>
>
>
>
> ---------- Forwarded message ----------
> From: "Ryan E. Benson" < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Thu, 27 Apr 2023 19:25:11 -0400
> Subject: Re: [WebAIM] Section 508 training/conference
> Hi Claire,
>
> I've attended and assisted with some of the backend setup with IAAF. It is
> foe federal employees and contractors, and there is a vendor hall usually.
> A great event for employees and contractors.
>
> --
> Ryan E. Benson
>
> On Wed, Apr 26, 2023, 2:29 PM Claire Forbes < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hello! What in-person/online trainings or conferences is everyone
> > participating in?
> >
> > I've completed DHS Trusted Tester in 2020 (I'd love a refresh/update),
> > WebAIM's virtual web accessibility training, and a bunch of various other
> > online webinars ... but naturally, I'm looking for more, what can you
> folks
> > suggest?
> >
> > Also, I saw the Annual Interagency Accessibility Forum is scheduled for
> > Nov 7-9, 2023 https://www.section508.gov/iaaf/ - has anyone previously
> > attended this?
> >
> > Thank you so much!
> > Claire
> >
> >
> > Claire Forbes
> > Training & Section 508 Specialist
> >
> > Victor 12, Inc.
> > 2420 Lakemont Ave. Suite 175
> > ​Orlando, Fl. 32814
> >
> > Tel: 407-612-6011 x119
> > Fax: 407-985-1980
> > Web: www.victor12.com
> >
> > CVE SDVOSB | VOSB | GSA Multiple Award Schedule (MAS) GS‑02F‑087BA
> > This message is for the designated recipient only and may contain
> > privileged, proprietary, or otherwise private information. ​
> > ​If you have received this message in error, please notify the sender
> > immediately and delete the original. Any other use of the email by you is
> > prohibited.
> >
> > > > > > > > > >
>
>
>
>
> ---------- Forwarded message ----------
> From: < = EMAIL ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 28 Apr 2023 16:28:13 +0200
> Subject: Re: [WebAIM] Accordion Group and Role Region
> 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
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Steve Green
> Sent: Thursday, April 27, 2023 6:28 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accordion Group and Role Region
>
> 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
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> glen walker
> Sent: Thursday, April 27, 2023 5:00 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Accordion Group and Role Region
>
> 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.
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> >
>
> > > > >