WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: glen walker
Date: Jun 15, 2023 10:39AM

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.