WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Geethavani.Shamanna
Date: Jun 15, 2023 8:26AM

That is correct, most screen readers announce when you enter/exit a region, and the accordion text is well demarcated. As a screen reader user, this is precisely why I like having regions associated with accordions. It is important to note that these regions are not visible when an accordion is collapsed. So if there are five accordions on a page but only one is expanded, only one accordion region is visible. Also, if all accordions on a page are collapsed, these regions are not displayed in the landmarks list. So unlike general landmarks which can be annoying if there are too many of them on a page, regions associated with accordions are nonintrusive.

Geetha
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Patrick H. Lauke
Sent: 15 June 2023 14:32
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Accordion design patterns

CAUTION: This mail comes from outside the University. Please consider this before opening attachments, clicking links, or acting on the content.

On 15/06/2023 14:27, Patrick H. Lauke wrote:
[...]
> 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.

For completeness, I should probably clarify: instead, if using the role and accName for the region, SRs will generally (depending on the specific SR/settings/etc) announce when you enter/exit a region, when you cross the threshold.

Same also if an SR user navigates in reverse through the page, they'll hear again when they crossed from the "regular" text into "this is text that is part of a region, labelled X"

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