Skip link

How to use it

Put the skip link as the very first element inside <body>, before the site header, on every page with repeated navigation. In your page, move id="dcl-skip-link-main" and tabindex="-1" onto your real <main> element; the demo uses a div so the gallery page keeps a single main landmark. Do not hide it with display: none or visibility: hidden, which removes it from the Tab order.

Accessibility

A real <a href> is the first focusable element; it sits off-screen until it receives keyboard focus, then appears in the top-left corner with a 2px outline, so sighted keyboard users can see where Tab went (WCAG 2.4.1 Bypass Blocks). Its target carries tabindex="-1" so following the link moves focus, not just the scroll position, past the repeated header links. The link is #ffffff on #1e40af (8.72:1); header and content text are #0f172a on #ffffff (17.85:1) and header links #1d4ed8 on #ffffff (6.70:1).

Source (copy-ready)

Copy code

<div class="dcl-skip-link">
  <a class="dcl-skip-link__link" href="#dcl-skip-link-main">Skip to main content</a>
  <div class="dcl-skip-link__header">
    <span class="dcl-skip-link__brand">Field Notes</span>
    <a class="dcl-skip-link__navlink" href="../index.html">Archive</a>
    <a class="dcl-skip-link__navlink" href="../about.html">About</a>
  </div>
  <div class="dcl-skip-link__main" id="dcl-skip-link-main" tabindex="-1">
    <h2 class="dcl-skip-link__title">Main content</h2>
    <p class="dcl-skip-link__text">Press Tab from the top of this box: the skip link appears first and jumps straight here.</p>
  </div>
</div>
<style>
.dcl-skip-link { position: relative; max-width: 32rem; border: 1px solid #e2e8f0; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-skip-link__link { position: absolute; left: -10000px; top: 0.5rem; z-index: 10; padding: 0.5rem 0.875rem; border-radius: 0.25rem; font-weight: 600; text-decoration: underline; color: #ffffff; background-color: #1e40af; }
.dcl-skip-link__link:focus { left: 0.5rem; }
.dcl-skip-link__link:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.dcl-skip-link__header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid #e2e8f0; color: #0f172a; background-color: #ffffff; }
.dcl-skip-link__brand { margin-right: auto; font-weight: 700; color: #0f172a; background-color: #ffffff; }
.dcl-skip-link__navlink { color: #1d4ed8; background-color: #ffffff; }
.dcl-skip-link__navlink:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-skip-link__main { padding: 1rem; color: #0f172a; background-color: #ffffff; }
.dcl-skip-link__main:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.dcl-skip-link__title { margin: 0 0 0.5rem; font-size: 1.125rem; color: #0f172a; background-color: #ffffff; }
.dcl-skip-link__text { margin: 0; color: #0f172a; background-color: #ffffff; }
</style>