Skip link

Problem Context

• Pages share repeated headers, navigation, breadcrumbs, filters, service menus, banners, or advertising before the unique page content.
• Users navigate sequentially by keyboard, switch, screen reader, voice, or magnifier and cannot visually ignore repeated material as easily as mouse users.
• The page still needs structural headings and landmarks, but some users need a direct first-focus bypass control.

Selection Rules

• Choose a skip link when repeated blocks appear before the primary content on pages in a site, service, product shell, or app.
• Place the primary skip link before the repeated block it bypasses, commonly immediately after the opening body tag or after required cookie or notification banners.
• Use a real anchor href that matches one unique target ID on the main content start, page H1, or equivalent first content landmark.
• Make the link keyboard focusable and prominent on focus; never hide it with display none, the hidden attribute, zero-size-only tricks, transparent-only styling, or a background-matching color.
• On activation, ensure the viewport and keyboard focus position both move to the target so subsequent Tab order continues in main content.
• Use one primary skip link in most layouts; add extra bypass links only for substantial repeated blocks such as long filters or sidebars.
• Use in-page anchor navigation for visible section contents, landmarks and headings for structural navigation, and Back links for returning to previous transaction pages.
• Retest skip links whenever layout shells, sticky headers, route transitions, or client-side rendering change the target or focus behavior.

Required States

• Default hidden-but-focusable state before keyboard focus.
• Focused visible state shown as the first or near-first keyboard stop.
• Activated state where viewport and keyboard focus reach the main content target.
• Repeated-block bypass state showing the number or set of navigation controls skipped.
• Broken-target state where missing or duplicate IDs are detected and fixed.
• Long repeated-block state with an additional skip link only when a filter or sidebar block is large enough to justify it.

Interaction Contract

• The skip link is reachable before the repeated content it bypasses.
• The link text names the destination, not only the content being skipped.
• Activating the link changes the current focus position to the intended target or a focusable proxy at the content start.
• The target remains unique, present, and not hidden by sticky headers after route changes or template changes.
• The link remains available to keyboard and assistive-technology users even when visually hidden by default.
• Skip-link activation does not submit forms, leave the page, move backward in history, or change application state beyond focus and scroll position.

Implementation Checklist

• Add the skip link near the top of the document before repeated header, navigation, and breadcrumb blocks.
• Use href="#main-content" or an equivalent target that exists exactly once on the page.
• Give the target an appropriate ID on main, H1, or a focusable proxy and handle focus transfer for browsers that only scroll.
• Style the link off-screen or clipped by default but visible, high contrast, and above other content on focus.
• Avoid display none, visibility hidden, hidden, opacity-only, same-color, or zero-size hiding methods that make the link inaccessible or invisible.
• Set scroll margin or focus offset so sticky headers do not cover the target.
• Test with keyboard only: first Tab reveals the link, Enter activates it, and the next Tab continues inside main content.
• Test route changes and layouts with cookie banners, service headers, sidebars, and long filters.

Common Generated-UI Mistakes

• Placing the skip link inside the header or after the navigation it should bypass.
• Hiding the link in a way that removes it from focus order.
• Using vague text such as Skip, Next, Continue, or Jump.
• Pointing to a missing, duplicated, or visually obscured target.
• Only scrolling the viewport while keyboard focus remains in the repeated navigation.
• Adding many skip links that become another repeated navigation block.
• Treating landmarks or headings as a complete substitute when keyboard users still need a direct bypass.

Critique Questions

• What repeated block does this skip link bypass, and is it before that block in focus order?
• Does first Tab reveal a visible, readable link for sighted keyboard users?
• Where does focus land after activation, and what receives the next Tab?
• Is the target unique, present after client-side route changes, and clear of sticky headers?
• Would one skip link be enough, or is there a separate large repeated filter or sidebar that needs its own bypass?
• Is this being confused with same-page section navigation, breadcrumbs, or a transaction Back link?