What's the best way to ensure accessibility for Bootstrap's accordion component?
Asked on Oct 27, 2025
Answer
To ensure accessibility for Bootstrap's accordion component, you should use proper ARIA attributes and semantic HTML. Bootstrap 5 provides built-in support for accessibility, but you should verify that your implementation follows these guidelines.
<!-- BEGIN COPY / PASTE -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the second item's accordion body.
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Ensure each accordion item has a unique `id` for the header and collapse elements.
- Use `aria-controls` to link the button to the corresponding collapse element.
- Use `aria-expanded` to indicate the current state of the collapsible content.
- The `data-bs-parent` attribute ensures only one accordion item is open at a time, enhancing usability.
Recommended Links: