Add a semantic link as the first focusable control in the page body, point it to a unique ID on the main-content area, and make sure it becomes clearly visible when focused. Here is a working HTML and CSS pattern, plus a keyboard test to check that it actually bypasses repeated navigation.
Build the skip link and its destination
Use a real anchor with an href fragment, placed near the start of <body>, before the header and navigation repeated across pages. Give the main-content target a matching, unique ID. A <main> landmark is a natural destination.
<body>
<a class="skip-link" href="#content">Skip to main content</a>
<header>…</header>
<nav>…</nav>
<main id="content">
<!-- page content -->
</main>
</body>The link text should make its destination clear. “Skip to main content” is conventional and specific. The fragment in href="#content" must match the destination ID exactly, and that ID must appear only once on the page. MDN describes this early-body anchor and main-content target as the core skip-link pattern: MDN: <a>: The Anchor element — Skip links.
Make it visible when focused
A skip link may remain visible all the time, or stay off screen until it receives keyboard focus. If you use the focus-only approach, ensure the focused link is easy to see, has sufficient contrast, and is not covered by other page elements. Do not hide it with display: none or visibility: hidden.
Recommended Free Tools
#1 Best Overall
.skip-link {
position: absolute;
top: -3em;
background: white;
color: black;
padding: .5rem 1rem;
z-index: 1000;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 0;
}This example moves the link above the viewport until focus brings it to the top. Adapt its position, colors, and stacking to your layout, and retain a strong visible focus indicator. Avoid removing the browser outline unless you replace it with an equally clear focus style. For guidance on visibility and placement, see W3C WAI Technique G1: Adding a link at the top of each page that goes directly to the main content area and W3C WAI Technique C15: Using CSS to change the presentation of a user interface component when it receives focus.
Test that it skips navigation and moves focus
- Load the page and press Tab once from the browser’s initial state. Check that the skip link is the first focusable control, or at least comes before repeated navigation.
- Confirm the focused link is visible and its name says where it leads.
- Press Enter. The viewport should move to the main content, and keyboard focus should move to that content target.
- Press Tab again. Focus should continue within or after the main content, not return to the navigation the link was meant to bypass.
Scrolling to the content without moving keyboard focus is not enough. W3C’s G1 test procedure checks focus order, destination wording, visibility, and whether activating the link moves focus to the main content. For more complex pages, repeat the test with the screen reader, switch access, voice control, or keyboard-emulation methods supported by your audience.
Common mistakes to avoid
- Adding the link after the navigation, so users must traverse the block it is meant to bypass.
- Using an ID that is missing or duplicated, or a fragment that does not match it.
- Hiding the link from keyboard users with
display: noneorvisibility: hidden, or leaving it permanently off screen even when focused. - Removing the focus outline without providing a clear replacement.
- Using a clickable
<div>instead of an anchor with anhref. - Leaving focus on the original link or navigation after only scrolling the viewport.
- Including repeated page chrome inside the main-content target, which prevents the link from bypassing it.
When to add more than one bypass link
A single skip link is useful when the main repeated block is global navigation. If a page has other repeated blocks that users should be able to bypass, links can target the content immediately after those blocks. For independent content areas, a set of links can direct users to each area. W3C documents these approaches in Technique G123: Adding a link at the beginning of a block of repeated content to go to the end of the block and Technique G124: Adding links at the top of the page to each area of the content.
W3C’s techniques are documented ways to meet WCAG requirements, not the only possible implementations. For the basic pattern, the important practical checks are that the link comes before repeated content, is visible when focused, and transfers keyboard focus to the intended destination.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Best Value
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
