A skip link is a practical way of navigating with the keyboard. Usually, one is always needed to jump through your site’s header navigation to the main content (using an anchor).

In this example, we aren’t using any visual styling; we use the buttons of Spruce CSS.

Please, note that in this example, the click (and enter) is disabled, so you won’t see it working correctly.

Technical Details

  • The skip link should be the first element inside your <body>.
  • Set up an ID on the element (usually on the <main>) where you want to navigate to (skip to).
  • You can use multiple skip links but don’t overdo it. A good example of it is the Google search page.
  • As with anything accessibility-related, test with your target browsers.

Resources