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