Skip links need a focusable target

Skip links must have a focusable target and appear before navigation

A page must provide a skip link before navigation that moves keyboard focus directly to the main content.

This pattern reduces repetitive tabbing for keyboard users.

It benefits blind users, people with low vision, and those who cannot or do not use a mouse.

Why It Matters

Screen readers and keyboards traverse content in source order. Long headers and menus can take dozens of key presses to pass.

A working skip link lets users land on the main content immediately, saving time and effort.

Users with low vision also rely on a visible focus indicator; if the link is hidden or unfocusable, they lose this route.

Common Causes

• No skip link at all, or it appears after the navigation.
• The link’s href points to an ID that does not exist on the page.
• The target exists but cannot receive focus (e.g., a plain <div> without tabindex).
• The link is visually hidden using display: none or visibility: hidden.
• Focus styles are removed, making the link invisible when tabbed to.
• JavaScript intercepts anchor navigation and prevents the focus from moving.

How to Fix

1. Place a skip link as the first focusable element in the body.
   • Example text: “Skip to main content”.
2. Point the link to the main content container via an ID (e.g., href="#main-content").
3. Ensure the target can receive focus when jumped to.
   • Recommendation: add tabindex="-1" to <main> (or the target container) so scripts can move focus to it.
4. Provide robust focus movement for browsers that don’t focus the target on hash navigation.
   • Attach a click handler to move focus to the target and scroll it into view.
5. Make the skip link clearly visible on keyboard focus.
   • Recommendation: do not use display: none or visibility: hidden.
   • Provide a strong focus style with at least 3:1 contrast for the focus indicator against adjacent colors (WCAG 2.2 Focus Appearance).
6. Keep it usable on all screen sizes.
   • Ensure the link is reachable with a hardware keyboard on mobile and not obscured by fixed headers.
7. Consider additional skip links for other repetitive blocks (e.g., filters, secondary navs), and use semantic landmarks (<header>, <nav>, <main>) to complement the experience.

How to Test

Keyboard

• Load the page and press Tab once: the skip link should receive focus and be visible.
• Press Enter/Return on the skip link: keyboard focus should move to the main content container.
• Press Tab again: focus should continue within main content (not jump back to navigation).

Screen reader

• With a screen reader active, Tab to the skip link and activate it.
• Confirm the screen reader’s virtual cursor moves to the main content and announces the region/heading there.

Mobile/touch

• Connect a hardware keyboard to a phone/tablet and press Tab.
• Confirm the skip link becomes visible and works as above.

Simple checks

• The page has exactly one first-in-source skip link to main content (additional skip links optional).
• The href target exists, is unique, and is focusable or programmatically focused on activation.
• The skip link has a visible focus indicator and sufficient contrast.

Good Example

<a class="skip-link" href="#main-content">Skip to main content</a>
<header>
  <nav><!-- site navigation --></nav>
</header>
<main id="main-content" tabindex="-1">
  <h1>Article title</h1>
  <p>Page content...</p>
</main>

<style>
  .skip-link {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-200%);

background: #fffbe6;

color: #111;

padding: 8px 12px;

border: 2px solid #7b1f1f;

z-index: 1000;

}

.skip-link:focus {

transform: translateY(0);

outline: none;

box-shadow: 0 0 0 3px rgba(0,0,0,0.2);

}

</style>

<script>

// Improves reliability of focus after hash navigation in some browsers

document.addEventListener('click', function (e) {

const link = e.target.closest('a[href^="#"]');

if (!link) return;

const id = link.getAttribute('href').slice(1);

if (!id) return;

const target = document.getElementById(id);

if (!target) return;

// Let default jump occur, then move programmatic focus

e.preventDefault();

target.setAttribute('tabindex', '-1');

target.focus({ preventScroll: true });

target.scrollIntoView({ block: 'start' });

});

</script>

Bad Example

<!-- Skip link hidden from everyone and target missing focus handling -->
<a class="visually-hidden" href="#content">Skip</a>
<nav><!-- lots of links --></nav>
<div id="content"><h1>News</h1></div>

<style>
  .visually-hidden { display: none; } /* Not accessible: removes link from keyboard */
</style>

Quick Checklist

• First tabbable element is a skip link before navigation.
• href points to an existing, unique ID for the main content.
• Target receives focus (tabindex="-1" or programmatic focus on activation).
• Skip link is visible on focus and not hidden with display: none or visibility: hidden.
• Focus indicator is obvious and meets contrast guidance.
• Works with only a keyboard in all major browsers.
• Optional: additional skip links for other repeated blocks; landmarks are present for structure.