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.
