DEV Community

Discussion on: How to build an Accordion Menu using HTML, CSS and JavaScript

supportic profile image
Supportic • Edited on

Since the button sits inside the H3 you can place role="heading" aria-level="3" on summary and inside just a button to trigger which takes the full width.
Even if it's saying to use a H3 it doesn't make sense to me because this raises the question what would you do when you want to use H2 inside the accordion? You are not allowed to skip headlines as far as I know ^^
Also in the example since they are not using icons displaying with content attribute in CSS, why isn't there aria-hidden true on that icon?

Thread Thread
merri profile image
Vesa Piittinen

The h3 is somewhat irrelevant, you can use other heading levels depending on the hierarchy. h3 however is the most likely level for accordions.

It doesn't make sense to put role="heading" aria-level="3" on summary because then you lose all the reasons for using the details + summary combo, which would be to get the functionality without JavaScript. As you change the semantics you'd also need to add aria-expanded, and at that point it would be the same if you were doing the thing using just div elements. Also I think you'd still lose the semantics inside summary element, so the button inside would not be announced as a button.

In short the point of using native HTML elements is to embrace what the existing features give you for free, such as <button /> providing all the keyboard goodness, tabbability, and submitting forms. And that last one you can opt-out with type="button". Aria is a hard hitting feature that should be the last resort, because when you use it you have to take responsibility of much more to get things right = learn to test the experience using a screenreader.

The "icon" has no content. It is an empty span so there is nothing a screenreader would take by mistake. So there is no need for aria-hidden="true". You only need aria-hidden="true" if there is a chance for irrelevant things to be announced (and thus worse user experience).