Skip to content

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

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

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.