WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Steve Green
Date: Jun 16, 2023 7:39AM

At least <dialog> can be used and you just need to do a few other things to make it work with mobile browsers. Admittedly, that includes making the dialog a direct child of the <body> element so you can apply aria-hidden="true" to everything else when the dialog is displayed.

That's not the case with <details> and <summary. For instance, you need to add role="button" to the <summary> element to get it to work with Dragon. However, doing so causes Voiceover not to announce the expanded / collapsed state. Maybe you can fix that by adding an "aria-expanded" attribute - I haven't tried. And if you want to hide the triangle (which you always want to do), Firefox now doesn't work properly. To fix all these user agent bugs, you would end up adding just as much ARIA and JavaScript as if you had built the thing from a pile of divs.

Steve