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

How can I implement ARIA roles for Bootstrap's accordion component to enhance accessibility?

Asked on Dec 19, 2025

Answer

To enhance accessibility in Bootstrap's accordion component, you can implement ARIA roles and attributes. This involves adding roles like "button" and "region" and using attributes such as "aria-expanded" and "aria-controls".

<!-- 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:

The `accordion-button` has the role of "button" by default, and `aria-expanded` indicates the current state (expanded or collapsed).
`aria-controls` links the button to the corresponding content panel.
The `accordion-collapse` div uses `aria-labelledby` to associate it with the button that controls it.
Ensure `data-bs-parent` is used to manage the accordion behavior correctly within the group.

✅ Answered with Bootstrap 5 best practices.

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

How can I implement ARIA roles for Bootstrap's accordion component to enhance accessibility?

Asked on Dec 19, 2025

Answer

The Q&A Network