What should be the `aria-role` of an accordion? During accessibility check, my accordions are read as buttons, which may confuse the user

Question

I have a webpage and I have managed to keep few accordions in it as well. Since I have given "role"="button" on accordions, my accordions are read as 'button' during accessibility testing.

What should be the aria-parameter values if I wanted my accordions to be read as accordions itself, not buttons?

Can someone give an insight on it? Also, it would be great if anyone can share the accessibility testing standards.

Answer 1

To the average user, a button is a thing you activate to make something happen while an accordion is a musical instrument. The roles you have already are fine.

There is no aria role to describe something as an accordion.

The latest W3C WAI-ARIA Authoring Practices note includes a section about accordions which uses buttons which is accompanied by a complete example.

Answer 2

My suggestion is:

• Use dl element with role="presentation" attribute.
• Use dt element with role="heading" for headings of accordion.
• Put button inside dt or heading so it will be implicitly focusable with tab order
• give button `aria-expanded' attribute and set it to true when accordion panel is expanded otherwise set to false.
• Put data in dd element

Here you can find more information with example in w3c