What's the best way to ensure accessibility for Bootstrap's accordion component?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

What's the best way to ensure accessibility for Bootstrap's accordion component?

Asked on Oct 27, 2025

Answer

The Q&A Network