WCAG 12.7 — On every web page, is a skip link or quick access link to the main content area present?

Missing skip link

The issue

The skip link is an essential navigation mechanism for keyboard users. WCAG success criterion 2.4.1 requires a mechanism to bypass blocks of content that are repeated on multiple pages, such as navigation menus. Without this link, the user must traverse all navigation elements with Tab on every page change — which can represent dozens or even hundreds of Tab presses before reaching the content. Imagine a site with a header containing a logo, a main menu with 8 entries each with a 5-link submenu, plus login links and a language selector. That represents over 50 focusable elements before the main content. For a keyboard user, traversing those 50 elements on every page is a considerable waste of time. The skip link solves this problem with a single Tab press. The skip link is typically the very first focusable element on the page. It is visually hidden by default and appears when it receives keyboard focus (CSS sr-only + focus:not-sr-only technique). When clicked or activated by keyboard, it moves focus to the main content area identified by its id (usually #main-content or #content). The skip link must actually work. A link pointing to a nonexistent id or that does not move focus serves no purpose. It is important to test the actual functioning of the link with the keyboard.

Does your site have this issue?

106 RGAA criteria analyzed in 5 minutes by our AI.

Test your site for free

Impact on users

For a keyboard user, the absence of a skip link turns every page visit into an obstacle course. On a site with 50 navigation elements, visiting 10 pages means 500 extra Tab presses just to traverse the navigation. This is a waste of time and energy that makes browsing tedious and tiring. People with motor disabilities who use a switch or breath control system are most impacted: each Tab press requires real physical effort. Multiplying this effort by the number of navigation links on every page can make a site effectively unusable. Screen reader users are also affected: they must listen to every navigation link announcement before reaching the content, considerably lengthening consultation time. Some screen readers offer shortcuts to jump to ARIA landmarks, but the skip link remains necessary because not all users use these advanced shortcuts.

Code example

Before (non-compliant)
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/products">Products</a>
      <a href="/services">Services</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <h1>Welcome</h1>
    <!-- Main content -->
  </main>
</body>
After (compliant)
<body>
  <!-- Skip link: first focusable element -->
  <a href="#main-content" class="sr-only focus:not-sr-only
    focus:absolute focus:top-2 focus:left-2 focus:z-50
    focus:px-4 focus:py-2 focus:bg-primary focus:text-white
    focus:rounded-lg">
    Skip to main content
  </a>
  <header>
    <nav aria-label="Main navigation">
      <a href="/">Home</a>
      <a href="/products">Products</a>
      <a href="/services">Services</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main id="main-content">
    <h1>Welcome</h1>
    <!-- Main content -->
  </main>
</body>

Frequently Asked Questions

Must the skip link be permanently visible?
No. The skip link is allowed to be visually hidden as long as it becomes visible when it receives keyboard focus. This is the most common technique: the link is sr-only by default and appears in a fixed position when focused. Some sites choose to make it permanently visible, which is also acceptable.
Which element should the skip link point to?
The link should point to the main content area, usually the <main> tag or a container identified by a unique id. The target id must exist on the page. Verify that focus actually moves to that element on click. If the target element is not natively focusable, add tabindex="-1" so it can receive programmatic focus.
Is a skip link needed on every page?
Yes. The skip link must be present on every page of the site, not just the homepage. Keyboard users can arrive on any page via an external link or search engine. The skip link is typically implemented in the global layout component to be present everywhere automatically.
Can I have multiple skip links?
Yes. You can add quick access links to other page areas: 'Skip to navigation', 'Skip to search', 'Skip to footer'. Group these links in a list or quick access bar. The link to the main content remains the most important and should be first.

Does your site have this issue?

Scrutia audits your site against WCAG 2.1 AA criteria in 5 minutes. Keyboard navigation, ARIA components, visible focus, contrasts, and much more.

Run a free audit