Skip link

At a glance

Why it matters

Sighted mouse users ignore repeated navigation by looking at the middle of the screen. Keyboard and screen reader users meet it in order, on every page. The W3C's own example is a news home page where reaching the main story without a skip link takes about 40 Tab presses, and a screen reader user hears 200 words first (Understanding 2.4.1); the same page notes this can take a long time and cause severe physical pain for some users. WebAIM adds that screen readers already have headings and landmarks to jump with, so the people a skip link helps most are sighted keyboard users, who have nothing else (WebAIM).

How do you build a skip link?

• 1. Put it first. The link is the first focusable element in the body, before the logo and the navigation; the first step of G1's test is that a link is the first focusable control on the page.
• 2. Point it at the main region. An anchor with href="#maincontent" and a main element with id="maincontent"; the href minus the hash matches the id (WebAIM).
• 3. Hide it off screen, not with display: none. Position it off canvas and bring it on screen on focus. display: none and the hidden attribute remove it from keyboard navigation, so it no longer exists for the people who need it (WebAIM).
• 4. Make it loud when it shows. A large, high-contrast box at the top of the page. Fast tabbing can pass it in a fraction of a second, so make it distinctive and let it linger (WebAIM).
• 5. Make the target take focus. Activating the link moves keyboard focus into the main content, and the next Tab continues from there; those are G1's last two test steps.
• 6. Test it with Tab and Enter. Load the page, press Tab once and the link appears; press Enter and focus lands in the main content.

Examples

Common mistakes

• Relying on the main landmark alone. It satisfies 2.4.1 for screen reader users and does nothing for a sighted keyboard user, who still tabs through every navigation link.
• Hiding it with display: none. Or the hidden attribute, or 0px size, or transparent text: each removes the link from the keyboard or makes it invisible when focused.
• Placing it after the logo or inside the nav. By the time focus reaches it, the user has already crossed part of what it was meant to skip.
• A target that is not the main content. An anchor to the top of the page, or an id that was renamed in a redesign, leaves the link doing nothing.
• A quiet reveal. Small text in a muted color flashes past a fast tabber; the link has to be the most obvious thing on the page while it has focus.

Frequently asked questions

Does WCAG require a skip link?

Not by name. Success criterion 2.4.1 Bypass Blocks, Level A, requires a mechanism to bypass blocks of content repeated on multiple pages. A skip link is the first sufficient technique the W3C lists (G1), but grouping repeated content with landmarks or headings is also sufficient. WebAIM still recommends a skip link, because landmarks and headings help screen reader users and do little for sighted keyboard users.

Should a skip link be visible all the time?

It can be, and the W3C says always-visible links are preferable, but 2.4.1 does not require it. The common compromise is a link that is hidden off screen and becomes prominently visible when it receives keyboard focus. What it must never be is removed with display: none or the hidden attribute, which take it out of keyboard navigation entirely.

Where does a skip link go in the HTML?

As the first focusable element inside the body, before the header and navigation, as an anchor whose href is the id of the main content region, for example href="#maincontent" paired with a main element carrying id="maincontent". Activating it moves keyboard focus into the main region, and the next Tab press continues from there.

Do you need more than one skip link?

Usually not. WebAIM notes that multiple skip links are rarely necessary; one link to the main content covers the common case. In-page links elsewhere on the page can let people jump to or over other sections, such as a long list of filters before search results, which the W3C gives as an example of a block worth bypassing.