A keyboard user may have to tab through the same header on every page before reaching the article. A skip link makes the main content reachable in one action, without changing the visual layout for everyone.

<a class="skip-link" href="#main">Skip to content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>

Keep it visible when focused

  • Place the link near the start of the document so it is one of the first keyboard stops.
  • Hide it visually without removing it from the tab order, then reveal it with :focus.
  • Give the target a stable ID and ensure focus can move to it.
.skip-link:not(:focus) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link:focus { clip-path: none; height: auto; width: auto; }

Test by pressing Tab immediately after loading the page, then activate the link and confirm the focus and reading position move to the main content.