Skip to content

Bootstrap Accessibility

Bootstrap provides accessible defaults for many components, but your markup and content choices still determine the final experience. This lesson covers the accessibility practices that matter most.

Bootstrap Accessibility Overview

Bootstrap's interactive JavaScript plugins—modals, dropdowns, accordions, tabs—already manage many ARIA attributes and keyboard interactions automatically, but only when you provide the correct base markup: matching ids, appropriate roles, and properly associated labels.

Beyond components, accessibility depends on choices you make directly: using semantic HTML elements instead of generic divs, ensuring sufficient color contrast (especially with subtle color utilities), and providing meaningful text alternatives for icons and images.

Concept Description Common Usage
Semantic HTML first Real buttons, links, headings, and lists Foundation for assistive technology support
ARIA roles and attributes role, aria-label, aria-expanded, aria-current Describing component state and purpose
Keyboard navigation Tab order, Enter/Space activation, Escape to close Usability without a mouse or touch input
Focus management Visible focus states, focus trapping in modals Helping users track their location on the page
Color contrast Sufficient contrast ratio between text and background Readable text for users with low vision

Bootstrap Accessibility Example

<button class="btn btn-outline-secondary" aria-label="Close notifications" aria-expanded="false">
  <i class="bi bi-bell" aria-hidden="true"></i>
</button>

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
  </ul>
</nav>

<span class="visually-hidden">Loading results, please wait</span>

The icon-only button pairs an aria-label describing its action with aria-hidden on the decorative icon inside. The pagination nav uses aria-label to describe its purpose and aria-current="page" to mark the active page for assistive technology. The final visually-hidden span provides context that's read by screen readers but not shown visually, useful for status updates.

Top 10 Bootstrap Accessibility Examples

These are the accessibility patterns you'll apply constantly when building with Bootstrap.

# Example Syntax
1 Accessible icon-only button <button aria-label="Close"><i class="bi bi-x" aria-hidden="true"></i></button>
2 Visually hidden helper text <span class="visually-hidden">Additional context</span>
3 Active nav link marker <a class="nav-link active" aria-current="page">Home</a>
4 Skip to content link <a class="visually-hidden-focusable" href="#main">Skip to content</a>
5 Labeled form input <label for="email" class="form-label">Email</label><input id="email" class="form-control">
6 Accessible dialog labeling <div class="modal" aria-labelledby="modalTitle">...</div>
7 Accessible progress bar <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
8 Accessible alert announcement <div class="alert alert-danger" role="alert">Error message</div>
9 Descriptive image alt text <img src="chart.png" alt="Revenue grew 20% quarter over quarter">
10 Focus-visible outline retained .btn:focus-visible { outline: 2px solid; }

Best Practices

  • Use real button and anchor elements for their intended purposes instead of clickable divs.
  • Always provide aria-label on icon-only interactive elements.
  • Maintain a logical heading hierarchy (h1 through h6) rather than choosing headings purely for visual size.
  • Test every interactive component using only a keyboard—Tab, Enter, Space, and Escape.
  • Verify color contrast for both default and subtle-variant text/background combinations.
  • Use aria-live regions for dynamically updating content like cart counts or search results.
  • Rely on Bootstrap's built-in ARIA handling for components, but double-check your markup provides correct ids and roles.

Common Mistakes

  • Using div or span elements with click handlers instead of accessible button or anchor elements.
  • Skipping heading levels purely to achieve a certain visual text size.
  • Relying only on color (like a red border) to indicate errors without any text or icon reinforcement.
  • Forgetting to test focus order and visibility, especially inside modals and offcanvas panels.
  • Using placeholder text as a substitute for a real, associated form label.
  • Assuming Bootstrap's default styling guarantees sufficient color contrast in every custom color combination.

Key Takeaways

  • Bootstrap components handle much of the ARIA and keyboard behavior automatically, but require correct base markup.
  • Semantic HTML elements are the foundation of an accessible interface.
  • Icon-only interactive elements need explicit aria-label attributes.
  • Color should never be the only signal for status, especially for errors or success states.
  • Keyboard-only testing reveals accessibility gaps that visual review alone will miss.

Pro Tip

Periodically navigate your entire interface using only the Tab, Enter, Space, and Escape keys with your mouse unplugged—this quickly surfaces missing focus states, broken tab order, and unreachable interactive elements that a visual review would miss.

You now understand key accessibility practices for Bootstrap projects. Continue to Bootstrap Performance to learn how to keep Bootstrap sites fast.