WebAIM - Web Accessibility In Mind

E-mail List Archives

Accordion design patterns

for

From: Steve Green
Date: Jun 15, 2023 6:20AM

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