WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Patrick H. Lauke
Date: Jun 15, 2023 7:27AM

On 15/06/2023 13:20, Steve Green wrote:
...
> 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.

I wouldn't say this is *required* (neither by the ARIA spec, nor WCAG),
but it's more about best practice.

> 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.

The role and explicit accessible name for the expanded panel do help in
delineating exactly where it starts/ends. Consider an accordion (or even
just a single disclosure widget) that is followed by "regular" other
text. Without delineating the expanded panel somehow, an SR user reading
through the panel content won't know once they've reached the end of the
panel and are now back in the "regular" part of the text. Depending on
the nature of the content in that panel, this may be quite confusing, as
they may assume the "regular" text that they're now on still just refers
to/relates to whatever accordion/disclosure widget option they opened.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke