Accessibility with Bootstrap

What the framework handles for free, what you still owe, and how to test the result with a keyboard before shipping.

What Bootstrap already does

<div class="modal fade" id="confirm" tabindex="-1"
     aria-labelledby="confirmTitle" aria-describedby="confirmBody" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="confirmTitle">Delete this project?</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="confirmBody">
        This removes 42 files and cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger">Delete project</button>
      </div>
    </div>
  </div>
</div>

• Never set aria-hidden="true" yourself — Bootstrap toggles it. A leftover value hides the whole dialog from screen readers.
• aria-labelledby must point at an element that exists and contains text, not at an empty placeholder.
• Focus is trapped inside the modal, so put the most likely action first in the footer rather than relying on a visually emphasised position alone.

What you still owe

<!-- 1. Skip link: visually hidden until focused -->
<a class="visually-hidden-focusable position-absolute top-0 start-0 p-2 bg-body" href="#main">Skip to content</a>

<!-- 2. Landmarks -->
<header role="banner">…</header>
<nav aria-label="Primary">…</nav>
<main id="main" tabindex="-1">…</main>

<!-- 3. An icon-only button has no accessible name without this -->
<button type="button" class="btn btn-outline-secondary" aria-label="Close panel">
  <span aria-hidden="true">&times;</span>
</button>

<!-- 4. Status regions announce themselves when the content changes -->
<div class="alert alert-success" role="status">Saved.</div>
<div class="alert alert-danger" role="alert">Could not save.</div>

Keyboard and reduced motion

/* Bootstrap 5 ships this; keep it if you write your own transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Make focus visible and consistent instead of removing it */
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

• Tab through the page with the mouse untouched: every interactive element must be reachable, and focus must never disappear behind a sticky header.
• Open the modal, press Tab until you wrap around, then Escape — focus should return to the button that opened it.
• Zoom to 200% and check that nothing overlapping becomes unreachable; Bootstrap components reflow but fixed-width layouts do not.
• Run the page through an automated checker for the obvious failures, then use a screen reader once — automation misses copy that makes no sense out of context.

// Programmatic focus needs a target that can receive it.
// main has tabindex="-1" in the markup above, so this works:
document.querySelector('#main').focus();

// Announce a change that is not in a live region yet
const status = document.getElementById('toasts');
status.textContent = 'Filters applied. 12 results.';

FAQ

Related

Forms in depth Building a complete page with Bootstrap

Last refreshed 2026-09-18.