WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion design patterns

for

From: Peter Weil
Date: Jun 16, 2023 9:31AM

If you're doing a modal, <dialog> does both of these things for you with showModal(). In addition to offering automatic focus, it also — anecdotally, since I haven't seen it documented — returns the focus to the original trigger automatically when the modal dialog is closed.

But to get back on-topic, I agree that <details - summary> is far from perfect. But in a lot of situations, it's a reasonable choice.

Peter

> On Jun 16, 2023, at 8:39 AM, Steve Green < <EMAIL REMOVED> > wrote:
>
> 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
>
>
>