How to add a skip link
A skip link lets keyboard users jump past the menu to the main content. It is the first focusable element and can stay hidden until focused.
Step by step, with screenshots: Landmarks and skip links: the structure screen readers navigate by →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
A skip link is a link at the very start of a page, usually labelled "Skip to main content", that jumps straight to the main content. It is meant for keyboard and screen reader users and is typically hidden until it receives keyboard focus.
Without one, someone using the Tab key has to pass every logo, menu item and header link on every page before reaching the content, sometimes 30 or more stops. WCAG 2.2 success criterion 2.4.1 (Bypass Blocks, level A) requires a way to skip repeated blocks. getReport checks for a skip link. It is OK when the link is the first focusable element, becomes visible on focus and moves focus to the <main> element.
What a passing site looks like
- A skip link leads to the main contentwarning · −0.5 ptseffort S
There is no skip link to the main content
Why it matters. Keyboard users tab through every menu item on every page before they reach the content. A "Skip to content" link, visible on focus, takes them there in one keystroke.
- Add <a href="#main" class="skip-link">Skip to content</a> as the first element in <body> and give <main> the id "main".
- Hide it off-screen until it receives focus; do not use display none, which removes it from the tab order.
Questions people ask
What are skip navigation links?
They are in-page links that let keyboard users jump past repeated content, mainly the site header and menu, to the main content. The most common one is "Skip to main content"; some sites add more, such as "Skip to search". They are one of the simplest accessibility improvements and usually take a few lines of HTML and CSS.
Where should a skip to main content link point?
To the main content, usually the <main> element with an id, as in <a href="#main">Skip to main content</a> and <main id="main">. Place the link as the first element inside <body>, before the logo and menu. To test it, press Tab once on a fresh page load and then Enter; the next Tab should land inside the content.
Can I hide a skip link?
Yes, visually, until it is focused: move it off-screen with CSS and bring it into view with :focus, so it appears when someone presses Tab. Do not hide it with display: none or visibility: hidden, which removes it for keyboard users too. There is no need to remove it for looks; only people who press Tab ever see it.