CODEWITHSUNDEEP
htmlwai-aria
dwhieb
dwhieb

Reputation: 1836

ARIA attributes for custom expand / collapse button in details / summary

I am styling a set of <details> + <summary> elements, and using a custom icon for the expand / collapse arrow instead of the default arrow provided by browers:

<details>
  <summary>
    <svg aria-*='???'>
      <use href=#chevron>
    </svg>
    <h1>Heading</h1>
  </summary>
</details>

Does the SVG icon need any ARIA labels? Alternatively, should it be hidden from screen readers entirely (relying on just the "open" attribute to be announced instead)?

Upvotes: 1

Views: 539

Answers (1)

slugolicious
slugolicious

Reputation: 17535

The actual icon doesn't matter to the screen reader. It's just a picture that represents whether the section is open or closed. What's important to the screen reader is the state of the details widget, analogous to aria-expanded. The icon itself should be hidden to screen readers (possibly via aria-hidden).

Upvotes: 1

Related Questions