Building an Accessible Accordion Component

April 21, 2024

How to build an accessible accordion component that meets the W3C accessibility requirements. This accordion component is ideal for displaying content in a condensed format, allowing users to expand and collapse sections as needed. The design and functionality adhere to the Web Content Accessibility Guidelines (WCAG), ensuring that the component is usable by people with disabilities.

What is an Accordion?

An accordion is a vertically stacked list of headers that can be clicked to reveal or hide associated content. It’s a great way to manage the display of large amounts of content without overwhelming the user.

HTML Structure

Our accordion consists of multiple sections, each controlled by a button that toggles the visibility of the content area. Here’s the basic structure:

<div class="accordion" id="accordionGroup">
  <h3>
    <button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect1">
      <span class="accordion-title">Section Title<span class="accordion-icon"></span></span>
    </button>
  </h3>
  <div id="sect1" class="accordion-panel" hidden>
    <!-- Content goes here -->
  </div>
  <!-- Repeat for other sections -->
</div>

Styling

We use basic CSS to style the accordion, focusing on visibility, accessibility cues, and interactive elements. The CSS ensures that the accordion is visually appealing and provides feedback when interacted with, such as changes in color when a button is focused or hovered over.

JavaScript Functionality

A JavaScript class handles the behavior of the accordion. Each accordion header button toggles the visibility of the corresponding panel based on its aria-expanded attribute. This attribute helps assistive technologies understand whether the content is expanded or collapsed.

class Accordion {
  constructor(domNode) {
    this.rootEl = domNode;
    this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
    const controlsId = this.buttonEl.getAttribute('aria-controls');
    this.contentEl = document.getElementById(controlsId);
    this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';
    this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
  }

  onButtonClick() {
    this.toggle(!this.open);
  }

  toggle(open) {
    if (open === this.open) return;
    this.open = open;
    this.buttonEl.setAttribute('aria-expanded', `${open}`);
    open ? this.contentEl.removeAttribute('hidden') : this.contentEl.setAttribute('hidden', '');
  }
}

W3C Compliance

To meet W3C accessibility standards, our accordion:

Uses aria-expanded to indicate the state of each accordion panel.
Uses aria-controls to link the button to the content panel it controls.
Handles keyboard interactions, such as toggling on Enter or Space key presses.
Ensures all interactive elements are focusable and provide visual feedback.

Conclusion

Sample code: accordion-w3.html

Creating an accessible accordion requires careful attention to HTML structure, CSS styling, and JavaScript interaction. By adhering to W3C standards, we ensure our accordion is usable by as wide an audience as possible, including those using assistive technologies. This component not only enhances the user experience but also promotes inclusivity and accessibility in web design.

This guide serves as a foundation for understanding how to build web components that are both functional and accessible.

More Post to read

Domain Name – Configuration

May 11, 2024

Disallow WordPress Comments

April 23, 2024

SQL URL Replacer – From Local to Live

April 21, 2024

Building an Accessible Accordion Component

Good Reason to Run both Cloudflare and Wordfence on Your WordPress Website

March 27, 2024

Office365 Setup