Check for a skip navigation link

SiteCurl looks at the first five links on each page for a skip navigation link. It checks for anchor links (starting with #) whose text or target matches common patterns: 'skip to main content,' 'skip navigation,' 'jump to content,' or targets like #main, #content, and #main-content.

If a skip link is found among the first focusable elements, the check passes. The report shows the skip link's text and target so you can verify it points to the right place.

Pages without a skip link are flagged. Keyboard users on those pages must Tab through every navigation item to reach the main content.

Consider a site with 20 navigation links in the header. A keyboard user who lands on this page presses Tab 20 times before reaching the first link in the main content. On the next page, they press Tab 20 times again. And again on every page they visit. The navigation is the same, but they have to pass through it every single time.

A skip link fixes this. It is the first focusable element on the page, usually hidden until it receives focus. When the user presses Tab once, the skip link appears. They press Enter, and focus jumps past the navigation to the main content. Twenty Tab presses become two.

Skip links are one of the oldest accessibility techniques on the web, and one of the most effective. WCAG 2.2 includes them under Success Criterion 2.4.1 (Bypass Blocks) at Level A. Every page with repeated navigation blocks should have one.

The skip link is typically invisible until focused. It sits at the top of the page, hidden with a CSS class like sr-only. When a keyboard user presses Tab, it appears. When they Tab past it or click Enter, it disappears again. Sighted mouse users never see it.

Keyboard-only users include people with motor disabilities who cannot use a mouse, power users who prefer the keyboard, and anyone using assistive technology that emulates keyboard input. For all of them, navigating past 20 or more links on every page is exhausting.

Screen reader users benefit too. Even though they can use landmarks to skip navigation, not all pages have proper landmarks. A skip link is a reliable fallback that works regardless of the page's landmark structure.

Skip links are also a WCAG Level A requirement. Level A is the most basic conformance level. Sites that lack skip links fail the most fundamental accessibility check.

Sites with large navigation menus benefit the most. Enterprise sites, e-commerce stores with category menus, and documentation sites with sidebar navigation can have 30 or more links before the main content. A skip link saves keyboard users from tabbing through all of them on every page.

Single-page applications that reuse the same header on every view need a skip link too. Even though the URL may not change, the navigation is still repeated on every screen the user visits.

Government and education sites often have complex navigation with multiple levels of dropdowns. These sites are also the most likely to face accessibility audits and legal requirements. A skip link is one of the first things auditors check for.

Step 1: Add a skip link as the first element in your body. Place an anchor link at the very top of the page, before the navigation. Example: <a href='#main-content' class='sr-only focus:not-sr-only'>Skip to main content</a>. This makes it the first element a keyboard user reaches.

Step 2: Add the target ID to your main content. The skip link's href points to an ID on your page. Add that ID to your main content wrapper: <main id='main-content'>. If you already have a <main> element, just add the ID.

Step 3: Style it to appear on focus. Use a CSS class that hides the link visually but shows it when focused. In Tailwind: class='sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:px-4 focus:py-2'. This keeps it invisible to mouse users while making it available to keyboard users.

Step 4: Test with Tab. Open your page in a browser and press Tab. The skip link should be the first thing that appears. Press Enter and confirm that focus moves to the main content area, past the navigation.

Hiding the skip link with display:none. If you hide it with display:none or visibility:hidden, screen readers and keyboard users cannot reach it. Use a visually hidden class (sr-only) that keeps the element in the focus order and accessibility tree.

Pointing the skip link to a missing ID. If the href is '#main-content' but no element on the page has id='main-content', the link does nothing. The target ID must exist on the page.

Placing the skip link after the navigation. The skip link must be the first or one of the first focusable elements on the page. If it comes after the navigation, the user has already tabbed through everything by the time they reach it.

Using JavaScript instead of an anchor link. Some implementations use JavaScript to move focus. This can fail if JavaScript does not load or if the user has a script blocker. A plain HTML anchor link is more reliable and works everywhere.

After adding the skip link, run another SiteCurl scan. The check should pass. For a manual test, open your page and press Tab once. The skip link should become visible at the top of the page. Press Enter and confirm that focus moves past the navigation to the main content.

Check that the skip link works across different pages. If your site uses a shared layout template, the skip link should appear on every page. Visit a few different pages and Tab to confirm it shows up consistently.

A skip link saves keyboard users from tabbing through the entire navigation on every page visit. Add it as the first focusable element, point it to your main content, and hide it until it receives focus. It is a small addition with a large impact on keyboard navigation.