The skip link that doesn't skip

A skip link is usually the first accessibility feature a site adds. It is the small "Skip to main content" link that lets a keyboard or screen reader user jump past the navigation without tabbing through it on every page. It is easy to add and easy to get wrong in a way no automated check will catch.

We looked at a program site that had one. It had a link reading "Skip to main content" pointing at the page's main region, and a main region for it to point at. An automated scanner passes that without complaint.

Then we used it. A keyboard user presses the skip link, and focus does not move to the content. The next press of Tab continues from the top of the page, back into the navigation the link was supposed to skip.

Two things cause this, and neither is visible to a scanner that only checks whether the link and target exist.

The first is focus. Sending the browser to an anchor moves the scroll position, but it does not move keyboard focus unless the target can hold focus. A landmark like the main region cannot, by default. The fix is one attribute:

<main id="main-content" tabindex="-1">

With tabindex of negative one, the target can receive focus without becoming a tab stop of its own, so the skip link lands the user inside the content.

The second is the header. Many sites have a header fixed to the top of the window. Jump to the main region and the top of the content scrolls underneath that fixed header, so even when focus is right, the user is looking at content hidden behind the bar. The fix is to reserve room for it:

#main-content { scroll-margin-top: 6rem; }

Both fixes are small. The broken version and the working version pass the same automated check, because they differ in how they behave.

A passing accessibility scan does not show that a feature works. Our build gate runs several checks on every change and stops many failures from shipping, but we also put the mouse away and tab through the page the way a keyboard user would.