Skip Link

Accessibilitybeginner

// Definition

A link — usually the first focusable element, visually hidden until focused — that lets keyboard and screen-reader users jump straight past repeated navigation to the main content. "Skip to main content" appears on the first Tab press and, when activated, moves focus to `<main>`.

// Why it matters

Without a skip link, every keyboard user must Tab through the entire nav on every page load before reaching content — exhausting on a site with a large menu. QA cares because it's a WCAG requirement, trivially testable (Tab once, is it there?), and frequently missing or broken (present but doesn't actually move focus).

// How to test

cy.visit('/')
cy.get('body').tab()                                  // first Tab
cy.focused().should('contain', /skip to main/i)       // skip link is first
cy.focused().click()
cy.focused().should('match', 'main, main *')          // focus actually moved to main

// Common mistakes

  • No skip link at all (keyboard users tab through nav every time)
  • A skip link that's present but doesn't move focus when activated
  • Permanently hidden (display:none) so it never receives focus

// Related terms