WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion Group and Role Region

for

From: wolfgang.berndorfer@zweiterblick.at
Date: Apr 28, 2023 8:28AM

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 REMOVED> > On Behalf Of Steve Green
Sent: Thursday, April 27, 2023 6:28 PM
To: WebAIM Discussion List < <EMAIL 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 REMOVED> > On Behalf Of glen walker
Sent: Thursday, April 27, 2023 5:00 PM
To: WebAIM Discussion List < <EMAIL 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.