Skipping Past the Menu

The daily irritation

Somebody navigating by keyboard starts every page at the top and tabs forward through everything.

On a site with a logo, fourteen menu items, a search box, and two social icons, that is eighteen presses before reaching the first sentence.

Repeated on every page of a visit, which is where it stops being trivial.

A skip link removes that entirely and costs a few lines.

What one is

• The first thing focus reaches.
• Hidden until focused, then visible.
• Says skip to main content.
• Jumps past the navigation.
• Invisible to everybody else.

The second is what makes it acceptable to designers. It does not appear on the page at all unless somebody tabs to it, so it costs nothing visually and appears only for the people who need it.

Whether a small site needs one

Which is a fair question and the honest answer is sometimes.

A site with a five-item menu and nothing else in the header costs six presses to get past, which is mildly annoying rather than a barrier.

A site with fourteen items, dropdown submenus, a search box, and a language switcher is a genuine obstacle repeated on every page.

Count what is above your content and use about eight as the point where it becomes worth adding.

Below that, a skip link is still correct and the benefit is small enough that other things come first.

Dropdown menus count all their items, which is how a five-item menu becomes twenty-three.

A shorter menu is the better fix

Where the choice is available.

A navigation with fourteen items is a problem for everybody, not only for people using a keyboard.

It is harder to scan, harder to fit on a phone, and usually a sign that the site has been added to rather than organised.

Cutting it to six top-level items improves the site for every visitor and removes most of the reason for the skip link.

So the accessibility finding here is frequently a symptom of a structural problem worth addressing directly.

Add the skip link as well, since both are worth having.

A worked example

A business had eleven top-level menu items, several with submenus.

Tabbing from the top of a page to the first paragraph took twenty-six presses.

They added a skip link, which took their developer about fifteen minutes.

They also reorganised the menu down to six items over the following month, which had been on a list for two years.

The site became easier to use on a phone as a side effect, since the menu had been overflowing.

The accessibility check produced a navigation improvement nobody had prioritised on its own.

The common failure

Which is worth checking rather than assuming it works.

A skip link that exists, is announced, and does not actually move focus when activated.

That happens when the target it points at is not something focus can land on, so the page scrolls visually and focus stays in the navigation.

Somebody using it then continues tabbing through the menu they thought they had skipped, which is worse than not having one.

Test it by tabbing once, pressing enter, and then tabbing again to see where you land.

If the next thing focused is a menu item, it is not working.

Landmarks do a related job

Worth knowing since it may be most of the answer already.

A page built with proper regions for the header, navigation, main content, and footer lets a screen reader jump between them directly.

Somebody using one can go straight to the main content without any skip link at all.

That does not help keyboard users who are not using a screen reader, which is why both are worth having.

Most modern themes produce those regions correctly, so this is frequently already in place.

Ask whoever maintains your site whether the main content is marked as such, which is a one-word answer.

Ask for it as a package

Since it belongs with the previous item.

A skip link and a visible focus indicator are the two keyboard fixes, they are usually done by the same person in the same sitting, and neither takes long.

Ask for both together: a visible focus style on all interactive elements, and a skip link to the main content that actually moves focus.

That is under an hour for most sites and it covers the whole of keyboard usability.

Then test both yourself afterwards rather than assuming they were done.

Both are checkable in two minutes by pressing tab, which makes them among the few items in this subject you can verify without any tooling.

The mobile menu is a separate check

Since it behaves differently and is frequently forgotten.

A menu that collapses behind a button on a phone has its own keyboard behaviour: opening it, moving through it, and closing it again.

The common failures are a menu that cannot be closed without a mouse, and focus that continues into the hidden menu items when it is shut.

The second is the confusing one, since somebody tabs through a series of things they cannot see and have no way to reach.

Narrow your browser until the menu collapses and tab through it, which is the same two-minute test applied to the layout most visitors actually get.

The counter-case

This is a small benefit for most small sites.

A five-page site with a short menu gains very little, and the effort is better spent on the form and the contrast.

Skip links are also easy to implement badly, and one that does not move focus is worse than none because it wastes a press.

And a site whose navigation is genuinely short has already solved the problem.

Count what is above your content, shorten the menu if it is long, and ask for a skip link and a focus style together.

What to do

1. Count the presses to your first paragraph.
2. Include submenu items.
3. Shorten the menu if it is long.
4. Ask for a skip link.
5. Ask for it with the focus style.
6. Test it moves focus.
7. Check the main region is marked.

Step six is the one people skip, since a skip link that scrolls the page without moving focus looks correct and leaves somebody tabbing through the menu anyway.

Why the shortcut products do not solve this is covered in accessibility overlays and why people object.

Frequently asked questions

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.