Reading time: 3 minutes
Good morning!
I’m sharing a new tutorial with you to kick off the weekend.
In today’s tutorial, I’ll show you how to create an accessible accordion using Bootstrap. We’ll add a series of attributes that make it accessible to everyone.
I hope you like it. Let’s get started:
Step 1: Basic HTML Setup and Bootstrap Linking
Let’s begin by creating a new HTML file and setting up the basic structure. Make sure to link the Bootstrap CSS and JavaScript files in the <head> of your document:
Step 2: Accordion Structure
Within the <body>, we’ll create the main container for our accordion. We’ll use the Bootstrap class accordion:
Inside the accordion container, we’ll add the accordion panels. Each panel will be represented with the Bootstrap class card:
Step 3: Adding Accessible Content
To make our accordion accessible, we need to add appropriate attributes and links. In each panel, we’ll add a header and content, and use the id and aria attributes to establish relationships and provide information to assistive technologies.
In the header of each panel, we’ll use the Bootstrap class card-header along with a button to control the expansion and collapse of the panel:
Make sure the id of the header and panel content are unique and correspond correctly. We use the aria-expanded attribute to indicate whether the panel is expanded or collapsed, and aria-controls to link the header button with the panel content.
Step 4: Test Your Accessible Accordion!
Now that we’ve created our accessible accordion with Bootstrap, it’s important to test it to ensure it meets accessibility guidelines and works correctly on different devices and assistive technologies. Perform keyboard navigation tests, verify that panels expand and collapse properly, and check if the information is presented clearly and legibly.
Below is an example code and the result:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<title>Accessible Accordion for devcodelight</title></head>
<body>
<h1 class="text-center">Accessible Accordion with Bootstrap</h1><div class="container">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Lorem Item 1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ipsum harum provident
obcaecati saepe debitis quo non aliquam autem fugit sapiente, voluptatibus, eaque delectus
voluptas
consectetur libero! Dolorum, accusamus incidunt.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Lorem Item 2
</button>
</h2>
<div id"collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ipsum harum provident
obcaecati saepe debitis quo non aliquam autem fugit sapiente, voluptatibus, eaque delectus
voluptas
consectetur libero! Dolorum, accusamus incidunt.