Search code examples
htmlaccessibilitywai-aria

Semantically correct html for react accordion component

I currently have a functional react accordion component that has the following semantics:

<AccordionWrapper(div)>
  <AccordionTab(div)>
    <AccordionHeader(div)></AccordionHeader(/div)>
    <AccordionContent(div)></AccordionContent(/div)>
  <AccordionTab(/div)>
</AccordionWrapper(/div)>

I have read a few articles suggesting that it is best practice to use a button html element for the accordion header. I have read this gitHub post. This post also link to a example by which shows a button being used.

Another example I found was from accessible-accordion-pattern it also shows the use of a button and div approach. What justification is there for using a button over a div for an accordion container?

Another article I found was from Carnegie Museums of Pittsburgh and their accessibility. The example also shows a use of a button for their accordion header. This also leads me onto another question. In their example they use ul and li html tag. Is this the correct approach? I haven't managed to find another example which looks like this.

I'm currently trying to increase accessibility for my accordion component but unsure on the semantics. Also below I have added the aria tags I am using. Is the below sufficient or should I be using any additional aria tags?

<AccordionWrapper>
  <AccordionTab role='tab'>
    <AccordionHeader aria-expanded={...} tabIndex={...}>
      heading name here
    </AccordionHeader>
    <AccordionContent aria-hidden={...}>
      Any content I choose here
    </AccordionContent>
  <AccordionTab>
</AccordionWrapper>

How does my semantics I am using above stand for my goal to increase my accessibility, should I be using button for accordion header and also incorporate ul and li or is it best practice doing something completely different? Any simple examples displayed like above would be greatly appreciated.

Solution

  • I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.

    It sounds like all the other sites you referenced are using the same pattern on the aforementioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.

    You shouldn't be using role="tab" on an accordion. That's for the Tabs pattern.