Accessible SEO-friendly Accordion In JavaScript – Vanilla-Js-Accordion

Preview:

Description:

A lightweight, accessible, SEO-friendly accordion component built using vanilla JS, HTML unordered list and ARIA attribute.

How to use it:

Insert the core JavaScript and CSS files into the page.

<link rel="stylesheet" href="css/vanilla-js-accordion.css">
<script src="js/vanilla-js-accordion.js"></script>

Load the theme CSS in the page (not necessary).

<link rel="stylesheet" href="css/vanilla-js-accordion-theme.css">

Create an HTML list for the accordion. Some important notes:

• This <section> isn’t technically required but it can be handy for styling and semantics
• The Aria-label attribute tells visually impaired users they are using an accordion
• Accordion ‘sections’ are stored in list items so visually impaired users get a count.
• Buttons are tabbable and accessible to screen readers. The aria labels give further info to screen readers about content and state of the UI
• The Aria-hidden attribute makes the content neither visible or comprehensible when set to true. We also use an id on the content div which matches the button’s aria-controls value.

<section class="accordion">
  <ul aria-label="Accordion Control Group Buttons" class="accordion-controls">
    <li>
      <button aria-controls="accordion-content-1" aria-expanded="false" class="accordion-controls__button" title="Show content">Accordion 1</button>
      <div aria-hidden="true" id="accordion-content-1" class="accordion-controls__content">
        <p>
          Content 1
        </p>
      </div>
    </li>
    <li>
      <button aria-controls="accordion-content-2" aria-expanded="false" class="accordion-controls__button" title="Show content">Accordion 2</button>
      <div aria-hidden="true" id="accordion-content-2" class="accordion-controls__content">
        <p>
          Content 2
        </p>
      </div>
    </li>
    <li>
      <button aria-controls="accordion-content-3" aria-expanded="false" class="accordion-controls__button" title="Show content">Accordion 3</button>
      <div aria-hidden="true" id="accordion-content-3" class="accordion-controls__content">
        <p>
          Content 3
        </p>
      </div>
    </li>
  </ul>
</section>