A skip link is a hidden link at the very top of a page that becomes visible when a keyboard user presses Tab. It allows users to skip past repeated navigation elements and jump directly to the main content. WCAG 2.1 requires a mechanism to bypass blocks of content that repeat across pages, and skip links are the most common solution.

What is focus management?

Focus management is the practice of controlling where keyboard focus moves as users interact with a page. When a modal opens, focus should move into it. When it closes, focus should return to the element that triggered it. When new content loads dynamically, focus should move to a logical starting point so keyboard users are not left stranded.

How do I make skip links visible only to keyboard users?

Use CSS to position the skip link off-screen by default, then bring it into view when it receives focus. A common pattern is to use a transform or position that moves the link above the viewport, combined with a focus state that resets the position. This keeps the link invisible to mouse users but accessible to keyboard users who Tab into it.

Back to Blog

Accessibility Web Standards

Skip Links and Focus Management: Clear Paths Through the Field

By Brent Passmore Mar 31, 2026 4 min read

Updated Mar 9, 2026

The long walk problem

A typical website header contains a logo, a tagline, five or six navigation links, maybe a search bar, and a call to action. For a sighted mouse user, all of that is easy to skip; you scroll past it. For a keyboard user, every one of those elements requires a Tab press to get through before reaching the main content.

On a 20-link navigation, that's 20 Tab presses on every single page. Multiply that across a browsing session and you start to understand why WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks) exists. Users need a way to skip repeated content and get to what matters.

The skip link

A skip link is typically the first focusable element on the page: an anchor that jumps the user past the navigation directly to the main content. The pattern is simple:

Place a link at the very top of the <body> that targets the <main> element's id. Visually, it can be hidden off-screen until it receives focus, then slide into view so sighted keyboard users can see it. The important part: it must be the first thing a Tab keypress reaches.

Common skip link failures

Hidden with display: none. This removes the link from the tab order entirely. Use a clip/position technique instead, and reveal it on :focus.
No visible focus state. Sighted keyboard users need to see the skip link when they Tab to it. If it's invisible even when focused, it doesn't help them.
Broken target. The skip link jumps to an id that doesn't exist, or to an element that can't receive focus. In older browsers, you may need tabindex="-1" on the target to ensure focus actually moves there.
Only one skip link. Large pages with multiple sections (a sidebar, a footer nav, a content table) may benefit from multiple skip links or a skip link menu: "Skip to content, Skip to sidebar, Skip to footer."

Focus management beyond skip links

Skip links solve the page-load navigation problem, but focus management extends to every dynamic interaction on your site.

Modal dialogs

When a modal opens, focus should move to the first focusable element inside it, or to the modal container itself if it has a role and label. When the modal closes, focus should return to the element that triggered it. This round-trip focus management is what makes modals usable without a mouse.

Single-page application routing

When an SPA navigates to a new view without a full page reload, the browser doesn't reset focus. The user's focus stays wherever it was, often on a navigation link that's now irrelevant to the new content. Moving focus to the new page's heading or main content area after a route change replicates the natural focus reset of a traditional page load.

Inline content changes

Accordion panels, tab interfaces, and expandable sections all need focus management. When a panel opens, focus should move into it. When a tab is selected, focus should move to the tab panel. The pattern is consistent: the user takes an action, and focus follows the result of that action.

The path should match the intent

Good focus management is invisible when it works. The user presses a key, and they land where they expect. The path through the page matches their intent: no detours, no dead ends, no 20-press gauntlets before the content they came for.

eiSEO checks for the presence of skip links and proper focus indicators. But the navigation experience, the feel of moving through a page by keyboard, is something you need to test yourself. Tab through your site. Does every path lead somewhere useful? Does every interaction leave focus in a logical place?

Clear paths through the field. That's all anyone is asking for.