Add a skip link – HTML Exercise with Solution

Let keyboard users jump past the menu.

What to build

A skip link at the very start of the page.

Requirements

The first element in the body is a link with the text Skip to main content.
It points to #content.
The main element has id="content" and tabindex="-1".

Constraints

Keep the menu and the heading as they are.

Example

The link comes first because keyboard focus follows the order of the source.

Why it works

Pressing Tab once reaches the link, and following it moves past every menu item in one step.

Hints

Hint 1

The skip link must be the first focusable thing in the body.

Hint 2

Its href is # followed by the id of main.

Solution

Show one correct solution (try it yourself first)

<a href="#content">Skip to main content</a>
<nav><a href="/1">One</a> <a href="/2">Two</a> <a href="/3">Three</a></nav>
<main id="content" tabindex="-1">
  <h1>Welcome</h1>
</main>

Lesson: Accessibility: pages that work for everyone →