Skip links are focusable

Skip links are visible and reachable by keyboard so users can bypass navigation.

Impact

ScanGov impact ratings

About

Including a skip link can help users skip to the main content to save time.

Risks

Screen reader users cannot identify or interact with elements.

Why it's important

Gives screen reader users meaningful descriptions of interactive elements so they can understand and use them.

User stories

As a screen reader user, I want all interactive elements to have clear, descriptive names so that I know what they do.

Code

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

<nav aria-label="Main navigation">
  ...
</nav>

<main id="main-content">
  ...
</main>

Error

ScanGov messaging when a site fails a standard:

Failed: Skip links are focusable

Example

A visually hidden skip link that becomes visible on focus:

<style>
  .skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #0054a0;
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 1000;
  }
  .skip-link:focus {
    top: 0;
  }
</style>

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

<nav>...</nav>

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

Guidance

Web Content Accessibility Guidelines (WCAG)

Indicators

Accessibility