How can I build an accessible skip-to-content link with Bootstrap?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I build an accessible skip-to-content link with Bootstrap?

Asked on Aug 01, 2025

Answer

To create an accessible skip-to-content link using Bootstrap, you can use a hidden link that becomes visible when focused. This allows users who rely on keyboards to navigate directly to the main content.

<!-- BEGIN COPY / PASTE -->
        <a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>

        <main id="main-content" tabindex="-1">
            <h1>Main Content</h1>
            <p>This is where the main content of the page goes.</p>
        </main>
        <!-- END COPY / PASTE -->

Additional Comment:

The `visually-hidden-focusable` class is a utility class that hides the link visually but makes it visible when focused.
The `href` attribute in the link points to the `id` of the main content section.
The `tabindex="-1"` on the main content allows it to be focused programmatically, which is useful for accessibility.
Ensure that the `visually-hidden-focusable` class is defined in your CSS to handle the visibility on focus.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I build an accessible skip-to-content link with Bootstrap?

Asked on Aug 01, 2025

Answer

The Q&A Network