WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Priti Rohra
Date: Jun 15, 2023 7:34AM

Hi Steve,

Use of role region is optional at least as per the APG. As a native screen
reader user I find the region role along with its name annoying to listen
to because:
- When multiple accordions are present, it kind of affects my ability to
navigate quickly using landmark navigation.
- Listening to the accessible names for each role region adds to the noise
for me. Accordions are used a lot in FAQs and the Accordion panel is
available after the header. As a user I have read the question and again I
have to listen to it in the form of accessible name for the region which
kind of irritates me.

From a conformance perspective, I don't see it as a challenge either.
I think role region should be used for accordion panel in case of a long
form and if each section of the form is implemented as an accordion.

Always BPositive!
Priti Rohra


On Thu, Jun 15, 2023 at 5:50 PM Steve Green < <EMAIL REMOVED> >
wrote:

> I have been looking at numerous accordion design patterns such as W3C,
> GOV.UK Design System and Whatsock, and they are all very similar. Each
> accordion section looks pretty much like this:
>
> <h2><button id="foo" aria-expanded="true" aria-controls="bar">Section
> name</button></h2>
> <div id="bar" role="region" aria-labelledby="foo">Section content</div>
>
> Can anyone explain the rationale or requirement for the role="region"
> aria-labelledby="foo" attributes? I can't find anything in the ARIA
> specification that requires them.
>
> In terms of the screen reader user experience, after opening an accordion
> section the section name is announced before the section content. This
> behaviour is caused by the "aria-labelledby" attribute and seems
> unnecessary since the section name would have been announced before the
> button was operated. If the section name is more than a few words, this
> behaviour is extremely annoying.
>
> My inclination is to advise clients to omit the role="region"
> aria-labelledby="foo" attributes, but I want to be sure this would not
> introduce a WCAG non-conformance or impair the user experience.
>
> Regards,
> Steve Green
> Managing Director
> Test Partners Ltd
> 020 3002 4176 (direct)
> 0800 612 2780 (switchboard)
> 07957 246 276 (mobile)
> 020 7692 5517 (fax)
> Skype: testpartners
> <EMAIL REMOVED>
> www.testpartners.co.uk
>
> Connect to me on LinkedIn - http://uk.linkedin.com/in/stevegreen2
>
> > > > >