WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Sandy Feldman
Date: Jun 15, 2023 7:47AM

https://sandyfeldman.com/panels/

what do people think of this thing that looks like an accordion? Still
tinkering, would love feedback.

Sandy
https://sandyfeldman.com
https://www.a11yready.com


On 2023-06-15 9:34 a.m., Priti Rohra 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
>> 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
>>
>> >> >> >> >>
> > > >