Accessibility
"It's built with Bootstrap" is not the same claim as "it's accessible." Bootstrap 5 genuinely does more accessibility work for you than most frameworks — its components ship with sensible focus states and the ARIA wiring their JavaScript behavior needs — but it cannot know what TrailMap's images show, whether a color pairing is readable, or whether a page's headings make logical sense. Knowing exactly where Bootstrap's help ends is what keeps a Bootstrap-built page from merely looking accessible.
What Bootstrap 5 Gives You for Free
| Feature | What it does |
|---|---|
| Visible focus states | Every interactive element (buttons, links, form controls) gets a visible outline/ring on keyboard focus by default |
.visually-hidden | Hides text visually while keeping it readable to screen readers — for context sighted users don't need but assistive tech does |
| Baked-in ARIA on components | Modals, accordions, dropdowns, and tabs ship with the correct role, aria-expanded, aria-controls etc. already wired to their JS behavior |
| Keyboard support | Interactive components (modal close on Esc, dropdown arrow-key navigation) work from the keyboard once you use the documented markup |
A concrete example: a screen-reader-only label on an icon-only pagination control uses
.visually-hidden — sighted users see just the arrow, screen reader users hear
"Previous":
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="visually-hidden">Previous</span>
</a>What's Still Your Responsibility
| Area | Why Bootstrap can't do it for you |
|---|---|
| Color contrast | The moment you override $primary (as in the Sass Customization lesson), you own the resulting contrast ratio against white/black text |
Meaningful alt text | Bootstrap has no idea a photo shows Eagle Ridge Trail's summit view — only you can write that |
| Logical heading order | Bootstrap's .h1–.h6 utility classes only change font size; they don't enforce that an <h3> follows an <h2> rather than skipping to <h5> |
| Labeling icon-only controls | An <i class="bi bi-heart"> button with no aria-label announces nothing useful to a screen reader |
$primary to TrailMap's trail-green in the Sass Customization lesson is exactly the kind of change that can silently break contrast — always re-check text-on-background contrast after changing a theme color.Worked Audit: TrailMap's Navbar
A collapsed mobile navbar is one of the most common places accessibility gets skipped. Here's a properly labeled, keyboard-navigable version:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">TrailMap</a>
<!-- 1. the hamburger has a real accessible label, not just an icon -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navMenu"
aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 2. dropdown works via keyboard: Tab to it, Enter/Space to open, arrows to move -->
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Trails
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Easy</a></li>
<li><a class="dropdown-item" href="#">Moderate</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The aria-label="Toggle navigation" is the part Bootstrap's documentation includes
but is easy to delete by accident while copy-pasting — without it, the collapsed hamburger
button is an unlabeled button to anyone not looking directly at the icon. The
aria-expanded/aria-controls pairing and keyboard support on the
dropdown, by contrast, come free the moment you use Bootstrap's documented
data-bs-toggle="dropdown" markup and its bundled JS.