Building a Skip Link That Actually Works

A working skip link has two parts: an anchor that links somewhere, and a target it can actually land on. Both must exist.

The anchor is a normal link whose href is a fragment, like a hash followed by an id. Clicking it tells the browser where to go.

The target is the element you want to reach. Give it a matching id so the fragment in the href has somewhere to point.

Point your skip link at the main landmark. It is the single region holding the unique content of the page, exactly where users want to land.

An old gotcha: the link scrolls the page, but focus stays on the link. The next Tab sends the user right back into the nav.

The fix is to let focus actually move there. Add tabindex equals minus one so the target can receive focus from the skip link.

Minus one means scriptable and link-targetable, but not in the Tab order. The element will not become a stray tab stop for everyone else.

Today most browsers move focus to the fragment target automatically. But adding tabindex minus one guarantees it works everywhere, so keep it.

Reload, press Tab once, then Enter. Your focus indicator should jump to the content, and the next Tab should continue inside it. ✅

Label it plainly. Skip to main content tells the user exactly what happens, far better than a vague Skip or an icon.

Place the anchor as the first child of the body, before the header, so Tab reaches it before anything else on the page.

What lets focus actually land on the main region?

Wire an anchor to a matching id on main, add tabindex minus one, and test by tabbing. That is a skip link that truly works. 🎯