Skip links

A skip link is usually the first interactive element on a page. It is visually hidden by default, appears on keyboard focus, and lets users bypass repeated blocks quickly.

This pattern is mainly relevant for keyboard users. It allows skipping past elements with many focusable children.

Recommended baseline: one link to main content

This is the default pattern for most websites:

A "Skip to main content" link comes first in the DOM.
The link is visually hidden while not focused.
On focus, the link becomes visible.
On activation, users jump to main content.
If a skip-link target is not focusable by default, set tabindex="-1" on that target.

Skip to main content link

Show HTML code

Show CSS code

<a class="skip-link" href="#main-content">
  Skip to main content
</a>

<header class="site-header" aria-label="Site header">
  <nav class="main-nav" aria-label="Main navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Support</a></li>
    </ul>
  </nav>
  <a class="header-search" id="site-search" href="#">
    Search
  </a>
</header>

<main id="main-content" tabindex="-1">
  <h1>Main content</h1>
  <p>
    This section is the recommended baseline target for most websites.
  </p>
  <p>
    You can continue with <a href="#">this content link</a> or
    <a href="#">this secondary link</a>.
  </p>
</main>

<footer class="site-footer" id="footer-navigation" tabindex="-1">
  <nav aria-label="Footer navigation">
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Imprint</a></li>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Accessibility statement</a></li>
    </ul>
  </nav>
</footer>

/* Skip-link functionality styles */
*:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 0.5rem 0.75rem;
  background: #000;
  color: #fff;
  text-decoration: none;
}

/* Demo page presentation styles */
body {
  max-width: 48rem;
  margin: 1rem auto;
  padding: 0 1rem;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #1f2937;
  background: #f8fafc;
}

a {
  color: #0b4a9e;
}

p,
h1,
h2 {
  margin-top: 0;
}

header,
section,
main,
footer {
  margin: 0 0 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 0.35rem;
}

.main-nav ul,
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
}

.main-nav li,
.site-footer li {
  display: inline-block;
  margin-right: 1rem;
}

.header-search {
  text-decoration: none;
  white-space: nowrap;
}

.header-search::before {
  content: "🔎 ";
}

Optional extension: links to multiple page areas

On complex pages, you can provide a small set of skip links to relevant areas (for example search, main content, footer navigation).

Skip links to multiple page sections

Show HTML code

Show CSS code

<a class="skip-link" href="#site-search">
  Skip to search
</a>
<a class="skip-link" href="#main-content">
  Skip to main content
</a>
<a class="skip-link" href="#footer-navigation">
  Skip to footer navigation
</a>

<header class="site-header">
  <nav class="main-nav" aria-label="Main navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Support</a></li>
    </ul>
  </nav>
  <a class="header-search" id="site-search" href="#">
    Search
  </a>
</header>

<main id="main-content" tabindex="-1">
  <h2>Main content</h2>
  <p>
    This section is the recommended baseline target for most websites.
  </p>
  <p>
    Continue with <a href="#">this content link</a>.
  </p>
</main>

<footer id="footer-navigation" tabindex="-1">
  <h2>Footer navigation</h2>
  <nav aria-label="Footer navigation">
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Accessibility statement</a></li>
    </ul>
  </nav>
</footer>

*:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 0.5rem 0.75rem;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.skip-link + .skip-link:focus {
  top: 3rem;
}

.skip-link + .skip-link + .skip-link:focus {
  top: 5rem;
}

body {
  max-width: 48rem;
  margin: 1rem auto;
  padding: 0 1rem;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #1f2937;
  background: #f8fafc;
}

a {
  color: #0b4a9e;
}

p,
h1,
h2 {
  margin-top: 0;
}

header,
section,
main,
footer {
  margin: 0 0 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 0.35rem;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  display: inline-block;
  margin-right: 1rem;
}

.header-search {
  text-decoration: none;
  white-space: nowrap;
}

.header-search::before {
  content: "🔎 ";
}

If you want to read more background and implementation guidance, see Skip navigation links.

For official standards and techniques, see:

You are here:

Skip links

Recommended baseline: one link to main content

Optional extension: links to multiple page areas

Previous/next navigation