Skip Links and Landmarks: Page Structure That Works

The cost of repeated navigation

Every page on a typical business site starts the same way. Logo, primary navigation, maybe a utility menu, maybe a promotional banner. A mouse user skips past all of it without thinking by clicking straight into the content.

A keyboard user cannot click past it. They press Tab through every link in the header, on every page, sometimes thirty or forty stops, before reaching the content they came for. Multiply that across a five page visit and the site has quietly taxed them hundreds of keystrokes.

WCAG Success Criterion 2.4.1, Bypass Blocks, asks for a mechanism to skip repeated blocks of content. The two mechanisms that cover it on most sites are skip links and landmarks, and the strongest pages ship both.

What a working skip link looks like

A skip link is the first focusable element on the page. It is an ordinary anchor that points at the main content container.

The pattern is small. A link reading Skip to main content sits as the first element inside the body and points at the id of the main element. It can stay visually hidden until it receives keyboard focus, then appear clearly at the top of the viewport so sighted keyboard users can see what they are about to activate.

Two details make it actually work. The link must become visible on focus, not stay hidden forever. And the target needs to accept focus, which for a main element usually means adding a negative tabindex so browsers reliably move both focus and reading position when the link is activated.

The ways skip links quietly break

Audit work keeps turning up skip links that exist and do nothing.

Some are hidden with display none, which removes them from the tab order entirely. Some become visible on focus but sit behind a sticky header where nobody can see them. Some point at an id that was renamed two redesigns ago, so activating them does nothing. Some move the visual scroll position but leave keyboard focus back in the header, so the next Tab press lands in the menu the visitor just tried to skip.

Each of these passes a quick glance at the code and fails the actual visitor. The test is behavioral. Load the page, press Tab once, activate the link, then press Tab again and confirm the next stop is inside the content.

Landmarks are the map of the page

Skip links mostly serve keyboard users. Landmarks serve screen reader users, who can pull up a list of the regions on a page and jump directly to any of them.

The native HTML elements create landmarks on their own. Use header for the banner, nav for navigation, main for the primary content, footer for the footer, and aside for complementary content. A page built from these elements gives a screen reader user a working map for free.

The most common failures are absence and excess. Absence means a page built entirely from divs, where the landmark list comes up empty. Excess means every minor block wrapped in nav or section until the map turns into noise.

A few rules keep landmarks useful. Exactly one main per page. Every piece of visible content inside some landmark. When a page has more than one nav, label each with aria-label, like Primary and Footer, so the list distinguishes them.

Headings finish the structure

Landmarks divide the page into regions. Headings divide the regions into topics, and heading navigation is among the most used screen reader shortcuts.

The rules here are also small. One h1 that states what the page is about. Heading levels that descend without skipping, so an h2 section contains h3 subsections rather than jumping to h5 because it looked the right size. No bold paragraphs doing a heading job, and no headings chosen for their font size.

Heading and landmark structure is also one of the cheapest accessibility wins on a site, because it usually lives in one layout template. Fix the template and every page inherits the fix.

How to verify the fix

The keyboard test takes under a minute per template. Load the page, press Tab, confirm the skip link appears, activate it, and confirm the next Tab stop is in the main content.

The structure test is nearly as fast with any accessibility inspector or screen reader rotor. Pull up the landmark list and the heading list. If both read like a sensible outline of the page, the structure works. If either is empty or chaotic, the template needs attention.

Then re scan the page. Automated checks confirm a main landmark exists, content sits inside landmarks, and heading levels do not skip, and they catch regressions when the layout changes later.

A free scan takes about a minute and flags missing structure on the page you care about most. The full audit report maps each structural finding to the WCAG criterion involved so a developer can fix the layout template directly.

No scan certifies legal compliance, and this article is not legal advice. What structure work does is cut the navigation cost of your site for keyboard and screen reader visitors, and it supports remediation toward WCAG 2.1 and 2.2 AA in a way you can demonstrate.

Because skip links, landmarks, and headings live in shared templates, this is some of the highest leverage remediation available. One pull request can improve every page on the site. Our audit walkthrough shows how structural findings appear in a real report, alongside the rest of the high frequency patterns.