Skip Link

Table of Contents

About

A skip link is a anchor link that permits to jump in the tab order to:

  • an element
  • or from one element to another

The scroll is created by a anchor with a fragment uri.

Example

With bootstrap 5 and the visually-hidden-focusable 1) class (the control becomes visible once focused).

  • If the below code is at the top of the html document
  • If you focus into the address bar with the keyboard shortcut alt+d
  • and press the tab key (once for chrome, more for firefox), you would see the two below skip link
<div class="visually-hidden-focusable">
  <div class="container-xl">
    <a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
    <a class="d-none d-md-inline-flex p-2 m-1" href="#nav">Skip to docs navigation</a>
  </div>
</div>

Powered by ComboStrap