Skip link

A hidden first link that keyboard users can use to jump past the header to the content.

CSS only components/skip-link.css

Press Tab

This documentation has one: reload the page and press Tab. It appears in the top corner and jumps to the content.

<p class="dsgn-body-s">This documentation has one: reload the page and press Tab. It appears in the top corner and jumps to the content.</p>
<a class="dsgn-button dsgn-skip-link" href="#skip-link">Skip to content</a>

Usage

Hidden until it receives keyboard focus (the first Tab on the page), then it appears as a solid button in the top start corner. Enter jumps past the header and navigation to the main content (WCAG 2.4.1 Bypass blocks). The target needs only an id; browsers move the focus starting point there. Put it first in <body>, before the header. Add more links (to the search, to the footer) for long pages: each one is its own .dsgn-skip-link, they appear one after another.

Details

Classes: .dsgn-skip-link
Tokens used: --dsgn-space-8
In Figma: Skip link
Import alone: dsgn.systems/components/skip-link.css