← 📄 HTML & the platform·Module A5 · Lesson 3

TaskBuild the skip-link pattern: <a class='skip-link' href='#main-content'>Skip to content</a> as the first child of body. Then <header><nav><a>Home</a></nav></header>. Then <main id='main-content' tabindex='-1'><h1>Page</h1></main>. CSS hides the skip link offscreen (position:absolute; top:-40px; left:8px) and brings it back on :focus (top:8px).

Skip-to-content link

75 XP6 min

Theory

What 95% of pages get wrong

Press Tab on most websites. Your first 20 tabs go through: logo, mega-nav with 15 dropdowns, language switcher, search, login. THEN you reach the actual content. Every. Single. Page.

A "skip to content" link is the WCAG fix:

<body>
  <a class="skip-link" href="#main-content">Skip to content</a>
  <header>…full nav…</header>
  <main id="main-content">
    …
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;             /* hidden offscreen by default */
  left: 8px;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 100;
}
.skip-link:focus {        /* slides into view on Tab */
  top: 8px;
}

How it works

The skip link is the first thing in the tab order. It's invisible until focused. The keyboard user hits Tab once, sees "Skip to content," presses Enter, and jumps past the nav to <main id="main-content">. Tab works as expected from there.

Mouse users never see it. Power users save themselves 20 keystrokes per page.

Where it MUST go

As the very first focusable element in <body>.
Target must have an id. Use tabindex="-1" on the target if you want JS-focus support.

Even when the visible target is wrong

If the user clicks the link via keyboard, <main> becomes the document scroll position. But focus also moves to <main> ONLY if it's keyboard-focusable. Add tabindex="-1" on <main> to make this work reliably:

<main id="main-content" tabindex="-1">…</main>

🔒

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.

First 10 lessons in each track are free. No card needed for those.

← Previous Next lesson →