Skip link
Add a skip-to-content link at the top of the page.
What is a skip link?
On a page, the menu always sits at the top, so keyboard users must move through every menu item. A skip link lightens that load: it is a hidden link at the very top, shows up on the first Tab, and says 'skip to main content'.
It also saves screen-reader users: instead of hearing the menu every time, they jump straight to the content.
href and id matching
A skip link has two parts: a <a href="#main-content"> at the top of the page and a <main id="main-content"> around the main content. The value after # in the link's href must match the target element's id exactly.
When the link is clicked, the browser focuses the target. An in-page link works this way.
Exercise Write the skip link and its target
Add a skip link at the top of body: <a href="#main-content">Skip to content</a>. Add a <main id="main-content"> to body with an <h1> inside, text News. The link's target and the main's id must match exactly.
Show example solution
<body>
<a href="#main-content">Skip to content</a>
<main id="main-content">
<h1>News</h1>
</main>
</body>Test yourself
-
What does a skip link do?
- Reloads the page
- Jumps to the main content
- Opens the menu
- Scrolls the page up
Show answer
Jumps to the main content — Correct. A skip link takes keyboard and screen-reader users to the main content.
-
Write the skip link's target
<a href="#main-content">Skip to content</a> <main ____="main-content"> <h1>News</h1> </main>Show answer
<a href="#main-content">Skip to content</a> <main id="main-content"> <h1>News</h1> </main> -
Match the skip link parts
- href="#main-content"
- Link's target
- id="main-content"
- Target's identity
- <a>
- Skip link
- <main>
- Main content