Monitoring Skip Links After a Navigation Redesign

Skip links vanish quietly in header redesigns. How to monitor that the first tab stop still exists, points at the right target, and becomes visible on focus.

Nobody deletes the skip link on purpose. It disappears during a header redesign, when the navigation partial is rebuilt and the plain little anchor before it is not in the new mock-up. Keyboard users notice on their first visit after launch, because the page that used to take one tab to enter now takes forty.

A skip link is a monitoring problem disguised as a design detail. It is one element, with a target, a visibility behaviour, and a focus behaviour, and every one of those can break independently. This post sets out the four checks worth automating or scripting into a release review, and the two failures that only show up with a keyboard in hand.

The four parts that can break separately

First, presence: the skip link should be the first focusable element in the DOM on every template, not just the homepage. Second, target: its href must resolve to an element that exists on that page, usually the main landmark, and that target needs tabindex='-1' in older patterns so focus actually moves in every browser. Third, visibility: a link that is permanently hidden fails sighted keyboard users; it must appear on focus. Fourth, the landing: after activation, focus and the reading position should be at the main content, not merely scrolled there while focus stays at the top.

WCAG frames this as 2.4.1 Bypass Blocks, a Level A criterion. It is one of the oldest requirements on the books, which is exactly why its absence reads as carelessness in an audit report.

Why redesigns kill it

Header work is usually scoped to what is visible: logo, nav, search, cart. The skip link is invisible in every screenshot in the design file, so it is invisible in the review too. Template engines make it worse; if the link lived inside the old header partial rather than the base layout, swapping the partial swaps it out of existence on every page at once.

The monitoring fix is to treat the skip link as part of the base layout contract. A release check that loads three templates, tabs once, and asserts the focused element's text and target takes minutes to write and catches the regression the day it ships, not the quarter it is reported.

What to record when it fails

Note which of the four parts failed, on which templates, and since which release if your monitoring history shows it. A missing link and a link pointing at a deleted id are different tickets with different owners. Keep the evidence small and mechanical: URL, first tab stop observed, expected target, actual result. That format gets fixed; a paragraph about keyboard experience gets discussed.

Related reading: Monitoring Focus Visibility When Sticky Headers and Banners Keep Changing, Monitoring Contrast in Sale Badges, Promo Text, and Price Colours, Monitoring Heading Levels After a Section Redesign.

Frequently asked questions

How many skip links does a page need?

One to the main content covers most pages. Pages with several large repeated blocks, such as a long account dashboard, sometimes add links to key sections, but a single working link to main content satisfies WCAG 2.4.1 for typical storefront templates.

Should the skip link be visible all the time?

It does not have to be visible before focus, but it must become visible when it receives keyboard focus. A link that stays hidden on focus fails sighted keyboard users even if screen reader users can use it.

Why does the page scroll but focus stay at the top?

The target element usually needs to be focusable, commonly with tabindex='-1', for focus to move with the jump in all browsers. Scrolling without moving focus leaves the next tab press back in the header, which is the failure users describe as the link doing nothing.

What is the quickest monitoring check for a skip link?

Load a page, press tab once, and record what is focused and where it points. Repeat on the product, collection, and checkout templates after any header change. Four observations per release catch nearly every skip link regression.