Accessible Structure

Skip Link Target

Jump Past Repeated Navigation

A page adds a skip link, repeated navigation, and a focusable main target so keyboard users can bypass repeated links.

Program

Skip links are ordinary anchors. They work because the href points to an id on the main content region.

skip_link_target.html
Visuals: captured from real browser rendering
<a class="skip-link" href="#main">Skip to content</a>
<nav><a href="/home">Home</a><a href="/settings">Settings</a></nav>
<main id="main" tabindex="-1">
  <h1>Settings</h1>
</main>

  1. Create the skip link.

    A Skip to content link appears before the page navigation.
    The href points to the future main region id.

  2. Render repeated navigation.

    Home and Settings navigation links appear after the skip link.
    The skip link gives keyboard users a way around repeated navigation.

  3. Create the main target id.

    An empty main content region appears below navigation.
    The id creates the destination for the skip link.

  4. Allow the main target to receive focus.

    The main region is ready to receive focus after the jump.
    tabindex -1 makes the target programmatically focusable without adding it to normal tab order.

  5. Add the target heading.

    The Settings heading appears inside the main skip target.
    The destination now lands on meaningful page content.
skip link A skip link is an early page anchor that jumps to the primary content.
focus target A target with an id and tabindex can receive keyboard focus after the jump.