WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Steve Green
Date: Jun 16, 2023 1:44AM

I have just started some proof of concept work on precisely this. Everything you need is baked into the native elements, so no need for "aria-expanded", "aria-controls" or any JavaScript. I have never seen anyone suggest adding "aria-labelledby" or role="region" to the native details/summary elements either, which is another reason why I question their need in any accordion design.

As far as I can tell so far, there are no downsides to using details/summary elements for accordions, but there are clearly some benefits.

Steve


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Peter Weil
Sent: Thursday, June 15, 2023 6:18 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accordion design patterns

I wonder whether using native disclosures (details/summary) instead of (javascript) accordions would have any bearing on the usefulness of applying role=region to the disclosed content containers. I’ve never seen a recommendation to use regions with native disclosures… but does their being native negate the need for these aria attributes ?

Peter

> On Jun 15, 2023, at 11:39 AM, glen walker < <EMAIL REMOVED> > wrote:
>
> It sounds like two screen reader users posted their preferences, one
> likes regions and one doesn't. Such is the life of UX and accessibility.
>
> I would lean on the side of having the region and label so that if the
> accordion is expanded, you can hear when you enter/exit the expanded
> panel, whether you're navigating forward or backwards.
>
> Probably the most common way that interaction will happen is tabbing
> to the expandable button in the accordion and deciding whether to open
> it, then navigating to the newly expanded panel. That would give the
> potential annoyance of having just announced the button label and then
> the button label again as the region label. But if the user navigates
> away from the accordion, leaving it expanded, peruses other parts of
> the page, then comes back to the accordion, having the region label will be helpful.
>
> To make everyone happy, you almost have to add the aria-labelledby
> dynamically *after* the panel is open, so that it doesn't announce
> initially but then announces if you navigate back to it. I'm not sure
> I'd recommend that approach but it might be a creative solution.
>
> But setting it dynamically might (?) cause it to be announced? I seem
> to recall an answer from Patrick to another question about changing a
> label (can't remember if it was a <label> element or aria-label
> attribute or
> similar) and changing the value mapped to a live event and was announced.
> I have bookmarks to both the
>
> HTML Accessibility API Mappings 1.0 -
> https://www.w3.org/TR/html-aam-1.0/
> Core Accessibility API Mappings 1.2 -
> https://www.w3.org/TR/core-aam-1.2/
>
> but I don't remember which API mapping documented the "live" announcement.
> I remember it being buried in the API mapping somewhere and was
> surprised to find that changing a value caused a live announcement.
> > > archives at http://webaim.org/discussion/archives
>