Re: Accordion Pattern (Sections With Show/Hide Functionality)

I can't speak for the APG Taskforce as to why they opted to not use them.  But in general the <details> and <summary> elements do have accessibility and usability concerns, e.g.:

1. You cannot wrap a <summary> element inside a heading, because it must be a direct child of the <details>.  You can place a heading inside the <summary>, but some browser/screen reader combinations didn't (and possibly still don't) expose the heading semantics.  This lead(s) some developers to add role="heading" to the <summary>, removing the indication of interactive role and state.

2. When using Ctrl+F in a browser to find text on the page, it is my understanding that the content inside each <details> element will be included in the search.  If text is found in a <details> that is closed, it will be automatically opened, and this may not be desirable depending on your use case for an accordion/disclosure.

3. Disclosures created with <details> and <summary> have no interactive role or state for VoiceOver users on iOS.  This makes it impossible for users to determine that they are interactive, and whether they are open or closed, other than through experimentation.  This alone makes them unsuitable for use in my view, despite this very much being an Apple bug.

4. In some browsers, depending on styling and other factors, the underlying disclosure triangle icon may be inappropriately conveyed to screen reader users.

Regards,

James Scholes
Director of Digital Accessibility, Prime Access Consulting, Inc.

On 28/07/2023 at 09:00, Eric Volkernick wrote:
> Hello - 
> 
> We are wondering why the docs for the accordion pattern <https://www.w3.org/WAI/ARIA/apg/patterns/accordion/> don't mention the details tag <https://developer.mozilla..org/en-US/docs/Web/HTML/Element/details> anywhere. Is this reference intentionally excluded? Is there some concern using a details tag?
> 
> Thanks,
> Eric
> 
> p.s. Your docs are extremely helpful. Thank you very much for maintaining them! :)
> 
> -- 
> Eric Volkernick (he/they)
> 908-4-DRUPAL
> eric@redfinsolutions.com <mailto:eric@redfinsolutions.com>
> redfinsolutions.com <http://redfinsolutions.com/>

Received on Friday, 28 July 2023 20:34:20 UTC