Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · design, site, app · since 2026-09

SkipLink

Purpose

The first stop of the page, hidden until focused: one link that lets a keyboard user jump over the header and the navigation to the main landmark. Hidden off-screen rather than removed, since display: none would take it out of the tab order, which is precisely what it exists to repair.

When to use, when not

Once per page, as the first element of the body, before the header. Not for jumping inside the content; that is a table of contents.

Anatomy

  1. An a with the target’s id as its href, in the action colour on its own fill, positioned above the page until focused.

Props

Props of SkipLink
NameTypeDefaultWhat it does
href?string'#main'The target: the id of the main landmark, with the hash. The element must carry tabindex="-1" to take the focus.
children?SnippetThe text; "Aller au contenu" when none.

States

Hidden, and focused; with the default text, and with another.

custom

Another target and another text, for a page whose main landmark is not the first thing worth reaching.

Light
Aller aux résultats

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Les résultats de la recherche.
Dark
Aller aux résultats

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Les résultats de la recherche.
320 px, light
Aller aux résultats

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Les résultats de la recherche.
320 px, dark
Aller aux résultats

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Les résultats de la recherche.
216 px, light
Aller aux résultats

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Les résultats de la recherche.
Forced colours, captured
SkipLink, story custom, as Chromium renders it with forced colours active

plain

Nothing to see until it has the focus: press Tab from the start of this frame and the link appears at the top left of the page.

Light
Aller au contenu

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Le contenu principal, qui reçoit le focus.
Dark
Aller au contenu

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Le contenu principal, qui reçoit le focus.
320 px, light
Aller au contenu

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Le contenu principal, qui reçoit le focus.
320 px, dark
Aller au contenu

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Le contenu principal, qui reçoit le focus.
216 px, light
Aller au contenu

Tabulez dans ce cadre : le lien apparaît en haut à gauche de la page.

Le contenu principal, qui reçoit le focus.
Forced colours, captured
SkipLink, story plain, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: a link, named by its text.
  • Keyboard, focus: the first Tab of the page reaches it; Enter moves the focus to the target. The target must carry tabindex="-1": without it the page scrolls and nothing takes the focus, and the next Tab starts from wherever the browser decides. The site’s sheet on the subject measures the difference.
  • Live regions: none.
  • Print: the link leaves the paper; a printed page has no focus to move.

Content rules

French. “Aller au contenu” for the main landmark; for another target, “Aller à” followed by what it is (“Aller aux résultats”).

Do and don’t

  • Do give the target tabindex="-1", and only that: a -1 is never a Tab stop.
  • Do put the link first in the body, before the header, so it is the first stop.
  • Do not hide it with display: none or visibility: hidden when idle.

Examples

<SkipLink />
<header>…</header>
<main id="main" tabindex="-1">…</main>

Surfaces

  • Design site, public site and the lab layout: the one link at the top of each shell.

Related

Link.

Decisions

  • 2026-09-24: written as a component and the base-layer rule retired with its last raw use, so the three shells stop copying a class and a text.

Criteria held by construction

  • 12.7, Dans chaque page web, un lien d'évitement ou d'accès rapide à la zone de contenu principal est-il présent ?
    It is the skip link to the main content the criterion asks for, first in the tab order, and it cannot be rendered without a target.
  • 12.6, Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d'en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
    The header and the navigation, present on every page, can be avoided in one keystroke.
  • 10.7, Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
    The link appears on focus, in the action colour on its own fill: the stop is visible, which a link hidden with display none never is.

Tokens it reads

Seen in patterns