WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Peter Weil
Date: Jun 15, 2023 7:47AM

Thanks Priti — it’s very interesting to read this.

I’ve always been under the impression that it can be annoying to add multiple landmarks (e.g., regions) to accordions, so I generally leave them out unless there’s a specific reason to have them (as in a form).

Peter

> On Jun 15, 2023, at 8:34 AM, Priti Rohra < <EMAIL REMOVED> > wrote:
>
> 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



--
Peter Weil
Web Developer
University Marketing, University of Wisconsin–Madison
608-220-3089