Author: | carl-evans |
---|---|
Views Total: | 1,117 views |
Official Page: | Go to website |
Last Update: | September 3, 2019 |
License: | MIT |
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’saria-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>