Free scan

November 1, 2026

Skip to content link: what it is for, where to put it and how to code it

A skip to content link is a link placed at the top of the page, or at the beginning of a repeated block, that lets users jump straight to the main content or to the end of a repeated block. It addresses WCAG success criterion 2.4.1 "Bypass Blocks", a Level A criterion which states that "a mechanism is available to bypass blocks of content that are repeated on multiple web pages". According to the W3C, the criterion aims to make keyboard navigation easier: users who rely on the keyboard can then move around pages efficiently. In practice, that means not having to go through the same repeated blocks on every page, such as the header, navigation links or advertising frames. A skip link is not the only way to meet this criterion, though: ARIA landmarks and section headings are also recognised techniques. Here is how to choose, place and code these mechanisms.

What is a skip to content link for (WCAG 2.4.1)?

Success criterion 2.4.1 is meant to give people who navigate sequentially through content more direct access to the primary content of the page. Websites often repeat the same blocks from one page to the next: the W3C mentions navigation links, header content and advertising frames. Small repeated sections, such as individual words, phrases or single links, are not considered blocks for the purposes of the criterion.

A sighted user can ignore these blocks by looking at the centre of the screen, and a mouse user can reach the desired link with a single click. Someone who navigates sequentially will generally have to go through every link and form control that comes before the item they want, on every page. The W3C gives the example of a news organisation's home page: if the user does not use the link placed at the top, a keyboard user needs to tab through approximately 40 links to reach the main story, and a screen reader user has to listen to 200 words.

Where should you place the skip link?

The sufficient techniques published by the W3C describe three possible placements for skip links. The right one depends on how your templates are built and where the repeated blocks sit.

Technique G1 means adding a link at the top of each page that goes directly to the main content area; in practice, that puts it before the header and the menu. The W3C also gives the example of an e-commerce site that shows a long list of filters before the search results: a link above the list lets users skip the filters and reach the products quickly. This case follows the spirit of technique G123, which consists of a link at the beginning of a repeated block that goes to the end of that block.

Where the repeated blocks are placed also matters. The W3C explains that the criterion does not intend to require methods that duplicate what the browser already does: most browsers provide keyboard shortcuts to move focus to the top of the page. So if a set of navigation links sits at the bottom of a page, a "skip" link may be unnecessary.

How to code a "Skip to content" link

Technique G1 means adding a link at the top of each page that goes directly to the main content area. A common implementation is an anchor link pointing to an id placed on that area, as in the example below. The example also uses a nav element for navigation (advisory technique H97, which groups related links), a main element and a heading at the start of the content, which illustrates the principle of technique H69.

Once the code is in place, check how it actually behaves with the keyboard only, no mouse: tabbing from the top of the page, you should reach the link before the header and menu, and activating it should take you to the start of the main content. Test every template on your site, since the criterion is about blocks repeated across multiple pages.

<body>
  <a href="#content" class="skip-link">Skip to content</a>

  <header>…</header>

  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
    </ul>
  </nav>

  <main id="content">
    <h1>Page title</h1>
    …
  </main>
</body>

Hiding the skip link without making it inaccessible

Many teams want to hide the skip link visually so it does not affect the design. The W3C text does not prescribe any hiding technique, but it sets one important rule: under the definition of "mechanism", the mechanism itself needs to meet all success criteria for the conformance level claimed. Hiding must therefore not make the link useless for the keyboard users it is meant for.

Good practice: if you hide it, make sure it stays reachable by keyboard and shows up when it receives focus. The CSS example below moves the link off-screen while it does not have focus, then displays it at the top of the page. Always validate it with the keyboard, without a mouse, on each of your templates.

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #000000;
  z-index: 1000;
}

ARIA landmarks and headings: other ways to bypass blocks

Criterion 2.4.1 is not limited to skip links. The W3C recognises a second family of sufficient techniques: grouping blocks of repeated material in a way that can be skipped. As a reminder, the W3C describes assistive technologies as tools that provide, among other things, additional navigation or orientation mechanisms.

One of these techniques is enough, but nothing stops you from combining them with a skip link. A note on the criterion also says the W3C strongly promotes structural markup on individual pages, as per success criterion 1.3.1, even though 2.4.1 deals with blocks repeated across multiple pages. Finally, even for a page that is not part of a set, it may be helpful, but not required, to provide a way to skip blocks of text repeated within the page.

Frequently asked questions

What is a skip to content link?

It is a link, usually placed at the very top of the page, that takes users straight to the main content without going through repeated blocks such as the header or menu. It corresponds to W3C technique G1 for WCAG criterion 2.4.1.

Is a skip link required?

Criterion 2.4.1, at Level A, requires a mechanism to bypass blocks repeated on multiple pages. A skip link is one of the sufficient techniques, but not the only one: ARIA landmarks (ARIA11) or headings at the beginning of each section (H69) are also recognised techniques.

Where do you put the skip to content link in HTML?

For technique G1, at the top of each page, before the repeated blocks, with its target on the main content area. To skip a specific block, such as a list of filters, place the link at the beginning of that block and point it to its end (in the spirit of technique G123).

Can you hide a skip link?

The W3C does not mandate a hiding technique, but the mechanism itself needs to meet all success criteria for the conformance level claimed. If it is visually hidden, our good-practice recommendation is that it stays reachable with the Tab key and appears when it receives focus.

Do you need a skip link if the menu is at the bottom of the page?

Not necessarily. The W3C notes that most browsers provide keyboard shortcuts to move to the top of the page: if navigation links are at the bottom, a "skip" link may be unnecessary.

Further reading on Conformly

Sources

This article relies on the official sources listed at the end of the page.