Bootstrap Accessibility Basics

Why Accessibility Matters

Accessibility (a11y) ensures your Bootstrap UI is usable by everyone, including keyboard users and people using screen readers. Better accessibility also improves UX, maintainability, and SEO.

1. Use Semantic HTML First

<header>...site header...</header>
<nav aria-label="Main navigation">...menu...</nav>
<main>
  <article>
    <h1>Bootstrap Forms Accessibility Guide</h1>
    <section><h2>Labels and Inputs</h2>...</section>
  </article>
</main>
<footer>...site footer...</footer>

2. ARIA Labels and Descriptions

<button class="btn btn-primary" aria-label="Download tutorial PDF">
  <i class="bi bi-download" aria-hidden="true"></i>
</button>

<input type="search" class="form-control" id="siteSearch" aria-describedby="searchHelp">
<div id="searchHelp" class="form-text">Search tutorials by topic.</div>

3. Accessible Forms

<form>
  <div class="mb-3">
    <label for="emailInput" class="form-label">Email address</label>
    <input type="email" class="form-control" id="emailInput" required aria-required="true">
  </div>
  <fieldset class="mb-3">
    <legend class="h6">Preferred contact method</legend>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="contactMethod" id="contactEmail">
      <label class="form-check-label" for="contactEmail">Email</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="contactMethod" id="contactPhone">
      <label class="form-check-label" for="contactPhone">Phone</label>
    </div>
  </fieldset>
</form>

4. Keyboard Navigation and Focus

Ensure all interactive elements are reachable using Tab.
Do not remove focus outlines unless you provide visible alternatives.
Use buttons for actions and links for navigation.
Avoid clickable div without proper role and keyboard handlers.

5. Color Contrast and Visual Clarity

Use sufficient contrast between text and background. Avoid using color alone to convey meaning. Pair status colors with text/icons, for example: success icon + message, not only green color.

6. Accessible Bootstrap Components

<!-- Accessible alert -->
<div class="alert alert-warning" role="alert">
  <i class="bi bi-exclamation-triangle-fill me-2" aria-hidden="true"></i>
  Please review your profile details.
</div>

<!-- Accessible modal trigger -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Open settings
</button>

Accessibility Testing Checklist

Check	What to verify
Headings	Single `h1` and logical heading order
Forms	Every input has a visible label
Keyboard	All controls usable without mouse
Focus	Visible focus state on interactive elements
Color contrast	Text contrast meets WCAG recommendations
Images	Meaningful images use descriptive `alt`
ARIA	Used only where native HTML is not enough
Landmarks	Use `header`, `nav`, `main`, `footer`