We recommend adding a "Skip to main content" link as the first interactive control on pages with a repeated header. It takes one HTML link, an ID on the main element, and a few lines of CSS.
The skip link appears when it receives keyboard focus.
Why a skip link matters
Without a way past the header, people who navigate through a page with a keyboard or other assistive device have to pass the same menu links on every page. That can mean dozens of key presses before reaching the main content, causing fatigue or pain.
In our desktop test of the Easy Surf homepage with the menus closed, pressing Tab through the header without activating the skip link took nine presses to reach the first link inside the main content, "Book your consultation". Using the skip link took Tab, Enter, Tab to reach that same link, saving six key presses. This might not sound like much, but throughout a day it adds up.
Without the shortcut, you pass the header links before reaching Book your consultation.
Web Content Accessibility Guidelines (WCAG) 2.2 success criterion 2.4.1 Bypass Blocks (Level A) requires a way to bypass blocks of content that are repeated on multiple web pages. WCAG allows several mechanisms, and a skip link is one sufficient technique.
Build the link with native HTML and CSS
Make the skip link the first focusable control in the page body. Set its href to #main and give the main element that ID. Put the main heading inside that element. You can also see the W3C skip-link technique and examples.
Copy the HTML example below.
<body> <a class="skip-link" href="#main">Skip to main content</a> <header class="site-header"> <a href="/">Site name</a> <nav> <a href="/services/">Services</a> </nav> </header> <main id="main" tabindex="-1"> <h1>Page title</h1> <p>The main content starts here, with <a href="/example/">a first link</a>.</p> </main> </body>
Adding tabindex="-1" to the main element is a practical safeguard rather than a WCAG requirement. As MDN's tabindex reference explains, a negative value keeps an element out of the Tab order while still letting it receive focus, so the skip link can move focus to the main element. The main heading marks where the content starts, but it isn't a Tab stop.
An always-visible skip link can help people who use switches, voice control or screen magnification. If you hide the link until someone tabs to it, position it offscreen with CSS rather than display: none or visibility: hidden, which remove it from keyboard navigation. Unlike screen-reader-only text, a skip link must become visible on :focus so sighted keyboard users can see it. When the link appears, make sure the text has at least 4.5:1 contrast against its background, the WCAG AA minimum for regular-sized text.
Copy the CSS example below.
.skip-link { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1000; /* above your header */ padding: 0.75rem 1rem; background: #000000; color: #ffffff; transform: translateY(-200%); } .skip-link:focus { transform: none; outline: 3px solid #005fcc; outline-offset: 2px; }
Use :focus rather than only :focus-visible, keep a visible focus outline, and set a z-index above your header.
If your header is fixed or sticky, also add this, replacing 5rem with your header's actual height so it doesn't cover the start of the main content.
Copy this CSS rule for a sticky header.
html { scroll-padding-top: 5rem; }
Test it with your keyboard
An automated check can miss a broken skip link, so run this quick keyboard test:
- Load a fresh page and press Tab once. (In Mac Safari, enable "Press Tab to highlight each item on a webpage" in Settings > Advanced.)
- Confirm the skip link appears above the header with a visible focus outline.
- Press Enter and check that the main heading is visible below any sticky header.
- Press Tab again. Check that focus lands on the first interactive control in the main content.
The skip link takes you past the header to the start of main content. The next Tab reaches Book your consultation.