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.
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.
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>
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.
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', '');
}
}
To meet W3C accessibility standards, our accordion:
aria-expanded
to indicate the state of each accordion panel.aria-controls
to link the button to the content panel it controls.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
Simple Membership Plugin: Setup
January 31, 2025
Essential Tools for Checking ARIA Compliance in Web Development
October 1, 2024
Secure Your WordPress Site with a Robust .htaccess Configuration
September 3, 2024
Setting Up a New Business: Should You Choose Google Workspace or Office365?
August 29, 2024
How to Add a Domain that Works with All Google Maps Platform APIs
July 3, 2024
June 20, 2024
May 11, 2024
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
March 20, 2024
March 4, 2024
Updating Your Hosts File: Exclusive Server Preview
February 23, 2024