A skip link lets keyboard and screen reader users jump past repeated navigation to the content. It costs a few lines, and landmark regions do the same job for screen reader users who navigate by structure.

The problem it solves

Navigation sits at the top of every page. Somebody using a mouse ignores it and reads the content.

Somebody using a keyboard cannot. Tabbing moves through every link in order, so reaching the first paragraph means passing the logo, every menu item, every dropdown entry, the search box and the call to action.

On a site with a large menu that is dozens of key presses. On every page. Before anything useful.

A skip link is a link at the very start of the page that jumps straight to the main content. It is the single highest-value accessibility fix available for the effort involved.

How it works

Three parts and none of them is complicated.

A link, first in the document, pointing at the main content region. The main content region carrying a matching identifier. And styling that keeps the link out of the way visually until it is focused.

The visual behaviour is the part people get wrong. A skip link should be invisible to a mouse user and become visible the moment it receives keyboard focus.

Hiding it in a way that removes it from the accessibility tree entirely defeats the point, because then nobody can reach it either. The technique is to position it off screen and bring it back on focus, rather than hiding it outright.

Where it should point

At the start of the actual content, not at the page wrapper.

Pointing at an element that contains the navigation puts the user back where they started, which is a surprisingly common implementation error.

It also has to move focus, not just scroll. A link that scrolls the page while leaving keyboard focus in the header means the next tab press returns to the menu, and the user is no better off.

Making the target focusable is what makes this work properly, and it is the detail most tutorials skip.

Landmarks do the same job differently

For screen reader users specifically.

Screen readers can list and jump between landmark regions: the banner, the navigation, the main content, the footer. Somebody who navigates that way does not need the skip link, because the structure already gives them the route.

Which means using the correct elements for those regions is doing accessibility work whether or not anybody thought of it that way.

Common failures: the whole page built from generic containers with no main region, several regions of the same type with nothing distinguishing them, and content sitting outside any landmark so it cannot be reached structurally.

Both mechanisms are worth having, because they serve different users. The skip link serves keyboard users generally; landmarks serve screen reader users navigating by structure.

The menu itself

Related problems worth checking while you are here.

Dropdowns that open on hover only cannot be reached by keyboard at all. They need to open on focus as well.

Dropdowns that trap focus, so tabbing enters a submenu and cannot escape it without a mouse.

Mobile menus that leave focus behind, where opening the menu visually does not move focus into it, so tabbing continues through the hidden page underneath.

That last one is the most common failure on modern sites and the least noticed, because it works perfectly with a mouse.

A mobile menu should move focus into itself when opened, keep focus inside while open, close on the escape key, and return focus to the button that opened it.

Testing it

  1. Load a page and press tab once. The skip link should appear.
  2. Press enter. Focus should land at the content, not scroll while focus stays put.
  3. Press tab again. The next stop should be in the content.
  4. Open the menu by keyboard, and confirm you can reach every item and get out.
  5. Open the mobile menu at a narrow width and check focus goes into it.
  6. Press escape, and confirm it closes and focus returns.

Six checks, two minutes, and they cover the route every keyboard user takes into every page.

The wider keyboard question, including the focus indicator that most themes remove, is covered in using a site without a mouse.

Frequently asked questions

What is a skip link?

A link at the very start of a page that jumps past repeated navigation to the main content, so keyboard users do not tab through the whole menu on every page.

How should it be hidden?

Positioned off screen and brought back on focus. Hiding it outright removes it from the accessibility tree so nobody can reach it either.

Where should it point?

At the start of the actual content, and it must move focus rather than only scrolling. A common error is pointing at a wrapper that still contains the navigation.

What are landmark regions?

Structural regions such as banner, navigation, main and footer, which screen readers can list and jump between. They serve the same purpose differently.

What is the most common menu failure?

A mobile menu that opens visually without moving focus into it, so tabbing continues through the hidden page underneath. It works perfectly with a mouse.

How do I test it?

Press tab once on load, then enter, then tab again. Focus should land in the content. Then open the menu by keyboard and confirm escape closes it and returns focus.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Menu that works perfectly with a mouse?

We check the keyboard route into every page, which is where the failures sit unnoticed.

Start a Conversation