A person using a keyboard to tab through a website navigation, with skip link visible

Why Your Skip Navigation Link Isn’t Working: Fixes That Actually Work

by

Short answer: A skip navigation link most often fails because focus doesn’t move to the correct target, the link is hidden off-screen rather than visually hidden, or the target element lacks a tabindex. Use a visible focus indicator, set tabindex=”-1″ on the main content wrapper, and ensure the skip link appears first in tab order.

Key takeaways

  • Ensure the skip link is the first focusable element on the page.
  • The target must have tabindex=”-1″ to receive focus programmatically.
  • Visually hide the skip link with CSS that still keeps it focusable.
  • Test with keyboard only: Tab after page load, look for the link.
  • Do not use display:none or visibility:hidden for the skip link.
  • Anchor ID must exactly match the href (including the #).

What you will find here

You added a skip navigation link. You tested it once, it worked, you moved on. But now a user reports they can’t click it, or focus vanishes when they press Enter. Sound familiar? A skip navigation link that doesn’t work is worse than no skip link at all — it breaks the experience for keyboard users and undermines your accessibility efforts. Let’s walk through the most common reasons skip links fail and how to fix each one.

Close-up of a code editor showing HTML and CSS for a skip navigation link
A working skip link requires correct HTML, CSS, and tabindex attributes. — Photo: analogicus / Pixabay

A skip navigation link is a hidden or partially visible link at the very top of a webpage. When activated (by pressing Tab after page load), it allows keyboard users to jump directly to the main content, bypassing repetitive navigation blocks. It’s a core requirement of WCAG 2.0 Success Criterion 2.4.1 (Bypass Blocks). Without it, keyboard users must tab through every single navigation link before reaching the content — annoying for a small site, unusable on a large one.

The element looks like this in HTML:

<a href="#main-content" class="skip-link">Skip to content</a>

When clicked or activated via Enter, the browser scrolls to the element with id="main-content" — but only if that element is focusable. And that’s where many skip links break.

Issue #1: The Target Element Isn’t Focusable

The most common failure: the href points to a <div> or <main> without a tabindex. Browsers won’t move focus to a non-interactive element by default. So the page scrolls, but the keyboard focus remains in the navigation. The user has no idea where their cursor is.

Fix: Add tabindex="-1" to the target element. This makes it programmatically focusable without adding it to the natural tab order. Apply it to your main content wrapper:

<main id="main-content" tabindex="-1">
  <!-- your content -->
</main>

Then remove the outline style if it looks ugly when focused — but keep it visible during focus for accessibility. You can use :focus-visible to show the outline only when the user is tabbing.

If you hide the skip link with display: none or visibility: hidden, it’s gone for everyone, including screen readers and keyboard users. You need to hide it visually but keep it focusable and accessible to assistive tech.

Here’s the standard “visually hidden” CSS class for skip links:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

This positions the link off-screen, but when focused (via Tab), it slides into view. Make sure the z-index places it above all other content. Test by slowly pressing Tab after page load — you should see the link appear at the top.

If your page has something before the skip link — like a visible logo with an anchor, or a “Skip to main” button wrapped in something else — the skip link won’t be the first focusable element. Keyboard users will tab through other items first, defeating the purpose.

Fix: Place the skip link immediately after the opening <body> tag, before anything else. Ensure no hidden elements (like screen-reader-only text) appear earlier in the DOM. Use the browser’s tab order visualizer or inspect the tabindex order to confirm.

Issue #4: The Anchor ID Doesn’t Match

It’s a typo or case-sensitivity problem. HTML IDs are case-sensitive. If your skip link points to #Main-Content but the element has id="main-content" (lowercase ‘m’), it won’t match. Similarly, extra spaces or special characters in the ID cause failures.

Fix: Double-check the href value (including the #) and the target id. Use a browser’s developer tools to verify the target element has the correct ID. Copy-paste the href value to be safe.

Sometimes developers use aria-hidden="true" on the skip link thinking it duplicates functionality. Or they wrap it in a <span> that gets hidden. Both will make the link invisible to assistive tech, so users won’t even know it exists.

Fix: Never add aria-hidden="true" to the skip link itself or any of its ancestors. Remove any hidden attribute. The skip link should be in the accessibility tree exactly as it is in the DOM.

A developer using a laptop to test website accessibility with keyboard navigation
Regular testing with keyboard only helps catch skip link failures. — Photo: jamesmarkosborne / Pixabay
  1. Load the page fresh. Hit Tab immediately. Do you see a link appear? If not, the link may not be first or is hidden incorrectly.
  2. Press Enter on the link. Does focus move to the target area? If not, check tabindex="-1" on the target.
  3. Check the ID match. Open DevTools, inspect the target, confirm id and href are identical (case & character).
  4. Verify no aria-hidden or display:none on the skip link itself.
  5. Use a screen reader. Test with VoiceOver or NVDA to ensure the link is announced and works.

If all these are correct, your skip link should work. If it still fails, you might have a JavaScript error or a conflicting CSS framework that dynamically hides elements. Disable scripts and test again.

Approach Pros Cons
display:none + JS show on focus Simple to implement Inaccessible until JS runs; screen readers may ignore
CSS off-screen + slide in on focus No JS needed, great accessibility Requires careful z-index & positioning
Always visible skip link No hiding tricks needed Visually messy for sighted users

The CSS off-screen method is the industry standard. Pair it with visible focus styles for the best experience. For more on ARIA and accessibility best practices, check out our Beginner’s Guide to ARIA Labels in HTML and 5 Common Accessibility Mistakes in Web Forms and How to Fix Them.

When to Use an Anchor vs. JavaScript for Focus Management

Some developers use JavaScript to force focus after a link click. That’s fine if the anchor approach fails — but you shouldn’t need it. href="#target" plus tabindex="-1" is reliable across all browsers. However, if you have a single-page app where navigation changes the DOM without a page reload, you may need to manually call .focus() on the target element after the content updates. In that case, ensure you also set tabindex="-1" and remove after to avoid leftover focusable elements.

A less obvious problem: the skip link is visible and focusable, but as soon as you press Tab, an event listener or CSS animation moves it away or hides it. For example, a sticky header might push it down, or a CSS transition might slide it back off-screen on any focus change. Test by tabbing to the link and then pressing Enter without moving the mouse. If the link disappears or jumps, inspect the CSS for transitions on the :focus state—make sure it stays visible long enough to be activated.

Sometimes the skip link scrolls to the target, but the target is hidden behind a fixed header or sticky nav. The content is there, but the top portion is covered. This frustrates users who expected to see the start of the content. Fix by adding scroll-margin-top to the target element:

<main id="main-content" tabindex="-1" style="scroll-margin-top: 80px;">
  <!-- content -->
</main>

Adjust the pixel value to match your fixed header height. This works in modern browsers and ensures the scroll position leaves room for the header.

Accessibility isn’t a feature you set and forget. Browser versions, assistive tech updates, and new content can break skip links. Make skip link testing part of your regular QA flow. Remember, a skip link that works benefits not only keyboard users but also screen reader users and anyone who prefers not to tab through 50 links. For more on the difference between accessible and usable design, read Accessible vs Usable: Key Differences Every Developer Should Know.

Frequently asked questions

Why does my skip link not show up when I press Tab?

If your skip link isn’t appearing when you tab, it’s likely hidden with display:none, visibility:hidden, or positioned off-screen without a visible focus style. Ensure the link is the first focusable element and that your CSS slides it into view on focus.

Should I use JavaScript for skip links?

You generally don’t need JavaScript. The native anchor behavior with href=’#target’ and tabindex=’-1′ on the target works in all modern browsers. Use JavaScript only in single-page apps where content updates without a page reload.

What’s the best way to style a skip link?

The best way is to position the link off-screen with position: absolute; top: -40px; and then on focus use top: 0; to bring it into view. Always ensure a visible focus indicator, like an outline or background color change.

Does a skip link work on mobile?

Skip links are primarily for keyboard users, which includes desktop and some mobile users with physical keyboards or accessibility switches. On touch-only devices, the skip link can still be used if the user connects a keyboard.

Can I use the same skip link for multiple languages?

Yes. The skip link text should be translated per language. The href and target ID remain the same. Use the lang attribute on the HTML element to ensure screen readers pronounce the link correctly.

Leave a Comment