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?
#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
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).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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?
The
h3is somewhat irrelevant, you can use other heading levels depending on the hierarchy.h3however 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 addaria-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 withtype="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 needaria-hidden="true"if there is a chance for irrelevant things to be announced (and thus worse user experience).