WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Peter Weil
Date: Jun 15, 2023 11:18AM

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