Skip to content
Logo mtc Berlin - Zur Startseite Logo mtc Berlin - Zur Startseite

Skip Links

Skip links (also known as “jump links”) are invisible or partially visible navigation aids that allow users to jump directly to specific areas of a webpage without having to navigate through numerous navigation elements and other repetitive content. These links are particularly important for keyboard users and people who use screen readers, as they help them navigate through websites efficiently.

Skip links typically appear only when they receive focus (e.g., through keyboard navigation with the Tab key) and remain invisible otherwise. They are usually placed at the beginning of a webpage and provide direct access to the main content, navigation, or other important areas of the page.

For sighted users who use a mouse, it’s easy to visually identify where the main content of a page is located and scroll directly to it. However, for keyboard users and screen reader users, this is not as straightforward. Without skip links, these users would have to:

  1. Tab through all navigation elements that are repeated on every page
  2. Navigate through the same elements again each time a page loads
  3. Spend significantly more time to reach the desired content

Skip links solve this problem by providing a direct path to the main content or other important areas, improving the user experience and increasing efficiency.

Implementing skip links is relatively simple. Here are the basic steps:

1. HTML Structure

Add one or more skip links at the beginning of your HTML file, right after the opening <body> tag:

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


  <!-- Rest of the page -->
  <header>...</header>
  <nav id="nav">...</nav>
  <main id="content">...</main>
  <footer id="footer">...</footer>
</body>

2. CSS Styling

Skip links should only be visible when they have focus. This can be achieved with CSS:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s;
}


.skip-link:focus {
  top: 0;
}

This CSS positions the skip link outside the visible area until it receives focus, at which point it appears at the top of the screen.

3. Define Target Areas

Ensure that the target area IDs (#content, #nav, #footer, etc.) exist in your HTML code:

<main id="content">
  <!-- Main content -->
</main>

To ensure your skip links are truly effective, follow these best practices:

1. Visibility and Accessibility

  • Distinct focus state: Ensure skip links are clearly visible when they receive focus.
  • Sufficient contrast: Use colors with sufficient contrast for better readability.
  • Appropriate font size: Use a readable font size (at least 16px).

2. Placement and Order

  • First tabbable elements: Skip links should be the first tabbable elements on the page.
  • Logical order: Arrange skip links in a logical order, starting with the link to the main content.

3. Targets and Labels

  • Clear labels: Use descriptive text such as “Skip to main content” instead of simple “Skip”.
  • Working targets: Ensure target IDs exist and are correct.
  • Focusable target: Target areas should be focusable or have a tabindex="-1" to receive focus.

Avoid these common mistakes when implementing skip links:

  1. Completely hiding skip links: Using display: none or visibility: hidden makes the links inaccessible to screen readers.
  2. Incorrect or missing target IDs: Links that reference non-existent IDs are useless.
  3. Missing focus state: Skip links that don’t become visible when focused provide no benefit to keyboard users.
  4. Insufficient contrast: Skip links with poor contrast are difficult to read.
  5. Too small clickable area: Skip links should have a sufficiently large clickable area.

Simple Implementation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Accessible Website</title>
    <style>
      .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: white;
        padding: 8px;
        z-index: 100;
        transition: top 0.3s;
      }


      .skip-link:focus {
        top: 0;
      }
    </style>
  </head>
  <body>
    <a href="#content" class="skip-link">Skip to main content</a>


    <header>
      <nav>
        <!-- Navigation -->
      </nav>
    </header>


    <main id="content" tabindex="-1">
      <!-- Main content -->
    </main>


    <footer>
      <!-- Footer -->
    </footer>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Accessible Website</title>
    <style>
      .skip-links {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
      }


      .skip-links a {
        position: absolute;
        top: -40px;
        left: 0;
        background: #000;
        color: white;
        padding: 8px;
        transition: top 0.3s;
        text-decoration: none;
      }


      .skip-links a:focus {
        top: 0;
        outline: 2px solid #4d90fe;
      }
    </style>
  </head>
  <body>
    <div class="skip-links">
      <a href="#content">Skip to main content</a>
      <a href="#nav">Skip to navigation</a>
      <a href="#search">Skip to search</a>
      <a href="#footer">Skip to footer</a>
    </div>


    <header>
      <div id="search" tabindex="-1">
        <!-- Search functionality -->
      </div>
      <nav id="nav" tabindex="-1">
        <!-- Navigation -->
      </nav>
    </header>


    <main id="content" tabindex="-1">
      <!-- Main content -->
    </main>


    <footer id="footer" tabindex="-1">
      <!-- Footer -->
    </footer>
  </body>
</html>

Use this checklist to ensure your skip links are accessible and effective:

  • Skip links are the first tabbable elements on the page
  • Skip links become clearly visible when focused
  • Skip links have meaningful labels
  • All target IDs exist and are correct
  • Target areas have tabindex="-1" if they are not normally focusable
  • Skip links have sufficient color contrast
  • Skip links work with keyboard and screen readers
  • There is at least one skip link to the main content
  • Skip links are not hidden with display: none or visibility: hidden

Conclusion

Skip links are a simple yet highly effective means of improving the accessibility of websites. They provide keyboard users and screen reader users with an efficient way to bypass repetitive content and go directly to the desired content. By implementing well-designed skip links, you can enhance the user experience for all visitors to your website, regardless of their abilities or the assistive technologies they use.

Implementing skip links is an important step towards compliance with the Web Content Accessibility Guidelines (WCAG) and helps make your website more accessible to all users.