Skip Links & Landmarks

Keyboard users shouldn’t have to press Tab dozens of times just to reach your main content.

That’s where “skip links” and landmarks come in, since they let users jump ahead instead of navigating linearly through every menu item or banner.

A skip link is a hidden link that becomes visible on focus, letting users jump straight to the main content (or any other key section).

Landmark elements like <header>, <nav>, <main>, <aside>, and <footer> also help screen reader users navigate by region, giving them a faster way to jump to content areas.

Good Practice

• Add a “Skip to main content” link at the very top of the page
• Ensure the destination (usually <main>) is focusable
• Make the link visually visible on keyboard focus, but hidden otherwise
• Use semantic landmark elements to define your layout

Minimal Working Example

<a href="#main" class="skip-link">Skip to main content</a>

<main id="main" tabindex="-1">
  <h1>Welcome to the page</h1>
  <p>Main content starts here…</p>
</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

The tabindex=“-1” on <main> allows it to receive focus programmatically — so the browser scrolls to it when the skip link is activated.

Bonus: Skip to Footer

For long pages, it’s also helpful to offer a “Skip to footer” link — especially when users are repeatedly reaching content at the bottom.

<a href="#footer" class="skip-link">Skip to footer</a>

<footer id="footer" tabindex="-1">…</footer>

And yes, you can test it right here on this very page! Try pressing Tab from the top and see if there’s a skip link 👀

Watch Out For

• Skip link that’s only visible to screen readers (not usable with keyboard)
• href=”#” or broken anchor targets
• Non-focusable target element (tabindex=“-1” missing)
• No landmarks (or multiple <main> tags on the same page)

Pro Tip

• Use the <main> element once per page
• Use ARIA landmarks (if needed) to supplement semantics
• Some screen readers offer region navigation shortcuts — they work better when your layout uses landmark elements properly

Do this today: Add a skip link to your layout — visible on focus — and test it using Tab from the top of the page. Try adding a second one that jumps to the footer. Also, confirm you’re using proper landmarks like <main>, <header>, and <nav>.