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
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Peter Weil
> Sent: Friday, June 16, 2023 2:13 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Accordion design patterns
>
> I know what you mean, Steve. But I find the most recent ones about <details-summary> and <dialog> pretty encouraging. Yes, there are some bugs and weirdness with how browsers treat <details-summary> and the specs about which role they should take, etc. still need work — or clarification, or something.
>
> But if you are ok with avoiding headings (h1, h2, etc.) and don’t care much about customizing the triangle, <details-summary> offers enough benefits to use over hand-rolled show-hide/accordion thingies for all kinds of things, including FAQs..
>
> Scott’s report on the improved browser support for <dialog> is encouraging, too. I’ve recently started using the native <dialog> for modals on a few sites, and it’s pretty nice. It has a lot of built-in functionality, and eliminates a boatload of javascript.
>
> Peter
>
>> On Jun 16, 2023, at 7:36 AM, Steve Green < <EMAIL REMOVED> > wrote:
>>
>> I really like how Scott does such in-depth testing, but his articles always reach the same conclusion. If you want a website to work on a wide variety of platforms, you can't use most of the important "new" HTML elements or ARIA roles created in the last ten years or so, that we have been waiting so long for. It's the same with the <dialog> element, role="tooltip" and others. You have to wonder if they will ever be properly supported.
>>
>> It almost makes me yearn for the good old days of browser-specific hacks (remember the "underscore hack", the "holly hack", the "asterisk hack" etc.?). At least we could code things properly and target the hacks at the crappy user agents that don't support standards properly. Remember how we used to refer to Chrome, Firefox and Safari as being standards compliant (as opposed to Internet Explorer, which wasn't). It seems that nothing is now. Such is progress.
>>
>> Steve
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Patrick H. Lauke
>> Sent: Friday, June 16, 2023 11:50 AM
>> To: <EMAIL REMOVED>
>> Subject: Re: [WebAIM] Accordion design patterns
>>
>>
>>
>> On 16/06/2023 08:44, Steve Green wrote:
>>> As far as I can tell so far, there are no downsides to using
>>> details/summary elements for accordions
>>
>> Worth having a squint over this
>> https://www.scottohara.me/blog/2022/09/12/details-summary.html
>>
>> P
>> --
>> Patrick H. Lauke
>>



--
Peter Weil
Web Developer
University Marketing, University of Wisconsin–Madison
608-220-3089