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.

Inter

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.

Zone

Since we are targetting a customer with a disability at this point, reading an accordian as a button is something conveying a wrong message to them, isn't it ? What would be the ideal way to handle this scenario ? Do you have any idea on it ? – Inter

@ArunRamachandran — It isn't conveying an accordion as a button. It is conveying a button (which makes some content visible) as a button. – Zone

It's highly doubtful that any customer will know what an "accordion" pattern is, so having some kind of label, whether visible or just for screen readers, that says the thing is an accordion will not help. A custom probably is familiar with selecting something and having it cause something else to appear or hide (expand or collapse). That's the information you should expose and is done with aria-expanded as mentioned in the accordion authoring practice reference that @Zone posted. – Hypersensitive

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

Skricki

For accordion widget role is role="presentation". — Err, no, not really. That means "Ignore the normal semantics of this element, it is being used only for presentation". It doesn't add the meaning "This is an accordian". – Zone

@Zone That was based on w3c best practice, He can use aria-label="accordion some other label", and bootstrap is using role='tablist', There is no specific role` for accordion – Skricki

I know where you got the information from. I was criticising your explanation of it. Using an aria-label to describe something as an accordion (which is industry jargon) is a terrible idea unless the website is targetted at UX professionals. Using aria-label is a pretty poor idea in this context anyway, it is used when there is no visible label (e.g. when you have a button described only with an icon). I can't think of any situation where it would be appropriate to use on an accordion. – Zone

@Quentin. Yes you are right. my point was there is no aria-role to describe an accordion – Skricki

Here's the new location for the WC3/WAI example: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ – Lavinialavinie

Answer 3

I've seen examples where the tablist role is used for an accordion widget -- which seems very reasonable (https://www.w3.org/TR/wai-aria-1.1/#tablist).

Anyway, WAI does not do that in https://www.w3.org/TR/wai-aria-practices-1.1/#accordion. Instead they demand that the controls to show/hide the panels are buttons (ideally with <button>s and without explicit roles) and that their interaction with the panels is described with aria-expanded, aria-controls and (depending on implementation) aria-disabled. The panel might be a region if you deem the content important enough. Finally, don't forget to make the accordion accessible by keyboard.

Edlin

The WAI accordion example has move to a new location: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ – Lavinialavinie

Answer 4

ARIA roles are not used extensively in accordions. The one role attribute you should use is role="region". Apply this to the div element that is expandable, for accordions that have 6 or fewer panels.

Here is a simple example for an FAQ accordion with one question and answer, which you can repeat for additional questions and answers.

<h3>Question
  <button type="button">
    Question
  </button>
</h3>
<div role="region">
  <p>Answer</p>
</div>

There are additional attributes you can add that would be beneficial for screen readers. See the W3 website for additional guidance.

Corby

You should label the region. Also you should use a native element like section. <section title="Question"> completely avoids Aria. Usually I prefer aria-labelledby though – Metrorrhagia