Skip Link Target - Everyday Interface Patterns

A skip link jumps to the main region, focuses the target, and reports the focus move in a polite status line.

Program

Skip links help keyboard users bypass repeated navigation. The target needs an id and a focusable destination.

skip_link_target.html

Visuals: captured from real browser rendering

<a class="skip" href="#main">Skip to content</a>
<nav><a href="/reports">Reports</a><a href="/settings">Settings</a></nav>
<main id="main" tabindex="-1"><h1>Dashboard</h1></main>
<p id="skip-status" role="status">Skip link ready.</p>
<style>
  .skip { position: absolute; left: -999px; }
  .skip:focus { left: 16px; top: 16px; background: #fef3c7; }
  main:focus { outline: 3px solid #2563eb; }
</style>
<script>
  const skip = document.querySelector(".skip");
  const skipStatus = document.querySelector("#skip-status");
  skip.addEventListener("click", event => {
    event.preventDefault();
    const target = document.querySelector(skip.getAttribute("href"));
    if (target) { target.focus(); skipStatus.textContent = "Main content focused."; }
  });
</script>

Point the skip link at main content.
The link has a concrete destination.
Make the main region focusable.
The main region can receive focus after the skip action.
Reveal the skip link on focus.
The skip link appears when keyboard focus reaches it.
Listen for skip activation.
Activating the skip link starts the focus move.
Find the target from the href.
The handler resolves the href and checks that the target exists.
Move focus to main.
Focus moves to the main region instead of staying in navigation.
Render the focus status.
The status line confirms where focus moved.

skip link A skip link lets keyboard users jump past repeated navigation.

tabindex -1 tabindex="-1" lets a script move focus to a normally non-focusable target.

focus style A focus style shows where keyboard focus landed.