Bootstrap Accessibility Patterns

Skip Navigation Links

Skip links help keyboard users bypass repetitive content. Use .visually-hidden-focusable to show the link only when focused. Place skip links as the first focusable element in the document.

Basic Skip Link

Tab into this demo area to see the skip link appear.

Multiple Skip Targets

Large applications may offer multiple skip destinations.

Skip Target Configuration

Screen Reader Only Text

Use .visually-hidden to provide context for screen reader users without affecting the visual layout. Essential for icon-only buttons, price formatting, and hidden document structure.

Hidden Headings for Document Structure

Add hidden headings to improve navigation for screen reader users.

Context for Icon-Only Buttons

Provide accessible names for buttons that only display icons.

Additional Context for Links

Add context to generic link text like "Read more" or "Learn more".

Price and Data Context

Make abbreviated content understandable for screen readers.

Accessible Icon Buttons

Icon-only buttons require accessible labels. Use .visually-hidden spans or aria-label attributes to provide context.

Icon Button with Visually Hidden Label

Icon Button Group (Text Formatting)

Use role="group" and aria-label on the container.

Bootstrap Close Button

Bootstrap's .btn-close uses aria-label by default.

Social Media Icon Links

Form Accessibility

Forms require careful attention to accessibility. Use visible labels when possible; reserve .visually-hidden labels for compact layouts where context is clear.

Search Field with Hidden Label

Search fields often use placeholder text, but always include a proper label.

Required Field Indicators

Provide clear required field indicators for both visual and screen reader users.

Error Messages with aria-describedby

Associate error messages with inputs using aria-describedby and aria-invalid.

Grouped Fields with Fieldset

Group related fields with <fieldset> and <legend>.

Focusable Container Pattern

Use .visually-hidden-focusable on containers to show content when any child element receives focus. Useful for toolbar panels and quick actions.

Panel Appears on Focus

Tab into this section to reveal the hidden panel.

Live Region Announcements

Live regions announce dynamic content changes to screen readers. Use role="status" for non-urgent updates and role="alert" for important announcements.

Status Messages (Polite)

Use aria-live="polite" for updates that don't interrupt the user.

Alert Messages (Assertive)

Use aria-live="assertive" for urgent announcements that interrupt.

Hidden Live Region Pattern

Create hidden live regions for JavaScript-driven announcements.

<!-- Hidden status announcer -->
<div class="visually-hidden"
     role="status"
     aria-live="polite"
     id="status-announcer">
  <!-- Updated via JavaScript -->
</div>

<!-- Hidden alert announcer -->
<div class="visually-hidden"
     role="alert"
     aria-live="assertive"
     id="alert-announcer">
  <!-- Urgent announcements -->
</div>

Decorative vs Informative Content

Distinguish between decorative elements (hidden from assistive technology) and informative elements (described for screen readers).

Decorative Images

Use empty alt="" and aria-hidden="true" for decorative images.

Product Card

The decorative banner image above is hidden from screen readers.

Informative Icons with Labels

When icons convey meaning, provide accessible labels.

Icons with Adjacent Descriptive Text

When text describes the icon, hide the icon from assistive technology.

Status Indicators

Combine visual indicators with screen reader context.

Best Practices Summary