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.
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>