CODEWITHSUNDEEP
javascripthtmlaccessibilityroleswai-aria
Arun Ramachandran
Arun Ramachandran

Reputation: 1382

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.

Upvotes: 11

Views: 10899

Answers (4)

Laura White
Laura White

Reputation: 342

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.

Upvotes: 0

wortwart
wortwart

Reputation: 3360

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.

Upvotes: 0

Shahram
Shahram

Reputation: 330

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

Upvotes: 1

Quentin
Quentin

Reputation: 943996

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.

Upvotes: 10

Related Questions