markteekman / accessible-astro-components

A set of Accessible, easy to use, Front-end UI Components for Astro.

Home Page:https://accessible-astro.netlify.app/accessible-components/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add correct `button` `id` reference for the contents `aria-labelledby` and add `role="region"`

markteekman opened this issue · comments

<h3>
  <button id="accordion-item1" class="accordion__header" aria-expanded="false" aria-controls="item1" onclick="toggleAccordionItem()">
      First Item
  </button>
</h3>
<div id="item1" class="accordion__panel" aria-labelledby="accordion-title1">
    ...
</div>

The button id should be accordion-title1. For better reference, it's also advised to add role="region" to the contents div: https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion.html