Skip links: how to add one and when it is required

A skip link is a link, usually the first one on the page, that points at the main content. Activating it moves a keyboard user past the logo, the navigation and anything else repeated on every page. Without a bypass mechanism, people who move through a page in order, such as keyboard and screen reader users, pass through that repeated content again on every page before they reach what they came for. W3C's Understanding document for success criterion 2.4.1 contrasts this with mouse users, who can click straight to a link, and sighted readers, who can look past repeated material.

Landmarks and headings are the other ways to meet the same criterion: see our guides to landmarks and regions and heading structure. This page is general information, not legal advice.

What WCAG requires: success criterion 2.4.1

Success criterion 2.4.1 Bypass Blocks is Level A, the first of WCAG's three conformance levels (see conformance levels). It asks that a mechanism is available to bypass blocks of content that are repeated on multiple web pages. Two of those phrases need unpacking:

• Blocks. W3C's examples are navigation links, header content and advertising frames. A single repeated word, phrase or link is not a block.
• Repeated on multiple web pages. The WCAG 2.2 glossary defines a set of web pages as pages that share a common purpose and are created by the same author, group or organization. The Understanding document says authors are not expected to avoid duplication across pages that are not related to each other, so the criterion concerns pages that belong together, such as the pages of one site.

W3C's Understanding document lists the techniques below as sufficient. They are examples of ways to meet the criterion, not requirements in themselves. The list also names PDF9 (headings in PDF documents) and H64 (the title attribute on iframes), which the table leaves out.

Is a skip link required?

Not by name. The criterion asks for a mechanism, and the table shows that W3C accepts landmarks or headings as well as skip links. Whether you need to add a skip link follows from how your pages are built:

• Pages that repeat a header and navigation before the main content need a mechanism, such as one of the techniques in the table.
• A page with very few items before the main content may need none, according to WebAIM's skip navigation article.
• The Understanding document says most browsers have shortcuts that move focus to the top of the page, so a skip link may be unnecessary when the navigation sits at the bottom.

We recommend a skip link anyway. WebAIM says a main region or an h1 at the start of the main content can be sufficient, but strongly recommends a skip link on pages with repeated navigation, because headings and regions are not very useful to sighted keyboard users who have no screen reader or specialized software. W3C's technique ARIA11 says browsers do not expose landmarks directly to users. In our reading, the skip link serves sighted keyboard users, and landmarks and headings serve screen reader users. A page can have all three.

In WebAIM's 2026 screen reader survey, 37.7% of respondents said they always or often use a "skip to main content" or "skip navigation" link when a page has one, up from 31.2% in 2021. WebAIM adds that skip links give distinct benefits to sighted keyboard users even where use among screen reader users is mixed, and notes that its sample was not controlled and may not represent all screen reader users.

Do any laws require a skip link?

A law or rule that adopts WCAG at Level A or AA for web content generally brings in 2.4.1, because it is a Level A criterion in WCAG 2.0, WCAG 2.1 and WCAG 2.2. What it brings in is the criterion, which asks for a mechanism and not specifically a skip link. The ADA's Title II web rule for state and local governments names WCAG 2.1 Level AA as its technical standard (ADA.gov). The Revised Section 508 Standards name WCAG 2.0 Level A and Level AA, and except non-web documents and software from 2.4.1 (U.S. Access Board).

Our pages on US accessibility law and Section 508 say who each covers, the ADA Title II deadline guide has the dates, and accessibility laws worldwide covers other jurisdictions. Ask a lawyer about your own obligations.

How to add a skip link

A working skip link has three parts: the link, the element it points at, and the CSS that shows the link when it has focus.

1. Put the link first and say where it goes

Make the link the first element inside the body, before the header and the navigation:

<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>...</header>
  <nav aria-label="Main">...</nav>
  <main id="main">
    <h1>Page title</h1>

W3C's technique G1 describes the first interactive item in the page as a link to the beginning of the main content. Its test checks that the link is the first focusable control and that its text says it goes to the main content. WebAIM lists several acceptable wordings and prefers "Skip to main content", because it names where the user is going instead of what they are skipping. Putting it first matches G1.

2. Give the main content an id the link can reach

The id on the target must match the link's href without the #, as WebAIM explains. Point the link at the start of the content that does not repeat. W3C's proposed ACT rule, document has an instrument to move focus to non-repeated content, includes failing examples for a link to an id that does not exist and for a link that lands inside the repeated block. The main element is also how HTML marks the main landmark, so one element can be both the target and the landmark.

3. Hide it until it has focus, and never with display none

W3C's G1 prefers a link that is visible at all times, because many keyboard users benefit, but says 2.4.1 does not require it to be visible while it lacks focus. WebAIM recommends the hidden-until-focus pattern for people concerned about appearance, and warns that display: none or the hidden attribute removes the link from keyboard navigation for everyone, and that matching its color to the background, making it fully transparent or sizing it to 0 pixels can also cause problems. WebAIM calls moving the link off screen with CSS, then onto the screen when it receives focus, probably the most accessible way to hide it visually:

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 18px;
  background: #111;
  color: #fff;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

Our own pages use the same approach, with the site's own colors, a solid background so the link stays readable, and a z-index to keep it above a sticky header. The link must also show a visible focus indicator, because success criterion 2.4.7 Focus Visible asks for a mode in which the keyboard focus indicator can be seen. WebAIM adds that a link revealed on focus may flash by when someone tabs quickly, so a distinctive look helps. Our guide to focus indicators covers the styling.

4. Check where focus goes next

When a link to a fragment is followed, the HTML Standard's scrolling to a fragment steps scroll the target into view, run the focusing steps for it, and move the sequential focus navigation starting point to it. In a browser that follows those steps, the next press of Tab should continue from the target, even when the target cannot take focus itself. To make focus land on the target, add tabindex="-1": MDN says an element with that value can be focused by script or a click but is not reached by sequential keyboard navigation. It is optional. A script that intercepts the click can stop the jump, so test pages that use one.

5. Add more only where a block needs one

WebAIM says a single skip link is enough in most cases and extra ones add clutter, and W3C says G1 is most useful when a page has one main content area and not multiple navigation sections. In our reading, a block like the long filter list in the Understanding document's e-commerce example is the kind technique G123 suits: it puts a link at the start of the block that goes to the end of it. G124 puts links to each area of the content at the top of the page and, according to W3C, is particularly useful for pages with many independent sections, such as portals.

Where skip links go wrong

The keyboard check at the end of this page can find each of these.

The first two rows are examples of the two breakages WebAIM reports. WebAIM's 2026 Million report, an analysis of one million home pages with data collected in February 2026, found that 17.1% of them had a skip link and that one out of every ten skip links was broken: either hidden in a way that made it inaccessible, or pointing at a target that was not on the page.

Skip links, landmarks and headings together

In our reading, the three techniques reach different people, so they work best together. WebAIM's NVDA guide lists single keys that move through a page by landmark (D) and by heading (H), and NVDA+F7 for an elements list of links, headings and landmarks. In the same WebAIM survey, going through the headings was the most common first step on a lengthy page, and landmarks were the primary method for far fewer respondents. Our guide to how screen readers read a page shows how this works in practice.

A sound base for most sites is:

• A skip link as the first focusable element, pointing at the main content.
• One main element, plus header, nav and footer landmarks. ARIA11 says that when the same landmark type appears more than once, each instance should be named.
• Real headings at the start of each section, with one h1 that names the page.

The Understanding document for 2.4.1 strongly promotes structural markup on individual pages under success criterion 1.3.1 Info and Relationships, and the landmarks and headings above are that markup. Where focus goes afterwards is the subject of our guide to focus order and tabindex.

Check it yourself

Run this test on every page template, because a template may carry its own header and its own skip link.

1. Find it. Reload the page, click in the address bar, then press Tab until focus enters the page. The skip link should be the first stop in the page and should appear on screen with a clear focus indicator.
2. Read it. Its text should say where it goes. "Skip to main content" does.
3. Use it. Press Enter. The view should move to the start of the main content.
4. Press Tab again. Focus should continue inside the main content, not return to the header or navigation. If it does, check the target and any script that handles the click.
5. Listen. With a screen reader on, open its list of landmarks or elements and look for a main landmark and a sensible heading outline.

Two free tools help with the surrounding structure. The accessibility bookmarklet runs in your own browser on the rendered page, flags links with no accessible name and shows the page's heading outline. It does not test skip links or landmarks, and it cannot tell whether a page works from the keyboard. The heading checker draws the heading outline from a page address or from pasted HTML.

The checks behind Scan my site for free read the HTML your server sends, and none of the 16 rule-based checks tests a skip link, as what we check lists. Steps one to four here expand the first of the eight checks in our five-minute keyboard test. The glossary has the short definition.