Générateur de lien d’évitement

<!-- Juste après <body>, avant l’en-tête : le premier élément atteint avec Tab -->
<a class="lien-evitement" href="#contenu">Aller au contenu</a>

<!-- La zone de contenu principal, plus bas dans la page -->
<main id="contenu" tabindex="-1">
	…
</main>

/* Par-dessus la page, en haut à gauche, à la même place sur toutes les pages */
.lien-evitement {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: #ffffff;
	color: #1a1a1a;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
}

.lien-evitement:focus {
	outline: 3px solid currentColor;
	outline-offset: -6px;
}

/* Masqué au repos mais toujours dans le parcours au clavier :
   ni display: none, ni visibility: hidden, qui lui retireraient le focus */
.lien-evitement:not(:focus) {
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

Ce que demande le critère 12.7

Le critère 12.7 du RGAA 4.1.2 a deux tests. Le premier, 12.7.1, demande que dans chaque page web un lien permette d’éviter la zone de contenu principal ou d’y accéder. Sa méthodologie part de l’élément main visible et accepte deux formes : un lien d’évitement placé juste avant la zone dans le code source, ou un lien d’accès rapide visible à la prise de focus lors d’une tabulation.

Le second, 12.7.2, se juge sur un ensemble de pages, par exemple les pages d’une rubrique ou d’un blog. Le lien doit y être :

• à la même place dans la présentation ;
• toujours dans le même ordre relatif dans le code source ;
• visible, ou à défaut visible à la prise de focus ;
• fonctionnel.

Le glossaire définit le lien fonctionnel : son activation permet de reprendre la lecture et la navigation au clavier à partir de la cible du lien. Un lien dont l’identifiant ne correspond à rien, ou qui laisse la tabulation repartir du haut de la page, ne l’est pas.

Un seul cas particulier : un site d’une seule page. Le critère peut alors être non applicable, s’il est avéré que le lien est inutile, par exemple parce que la page n’a ni navigation ni contenus additionnels.

Évitement ou accès rapide

Le glossaire distingue les deux. Un lien d’accès rapide mène à une zone de la page, un lien d’évitement fait sauter une zone. Le lien « Aller au contenu » produit ici est donc, au sens du RGAA, un lien d’accès rapide vers le contenu principal ; le critère 12.7 accepte l’un comme l’autre, et l’usage les appelle tous deux liens d’évitement, ou skip links en anglais.

Les liens vers le menu ou la recherche relèvent d’un autre critère. Le critère 12.6 demande que les zones d’en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche soient identifiables, et un lien d’accès rapide visible au focus est l’une des cinq façons admises. Les autres sont un rôle WAI-ARIA landmark, un titre, un bouton qui masque la zone ou un lien qui permet de l’éviter.

Le code expliqué

Le lien vient en premier dans le <body>. C’est ce que vérifie la technique G1 des WCAG : le lien est le premier élément qui reçoit le focus, et il mène au contenu principal. Placé dans le gabarit commun du site, il reste à la même place et dans le même ordre sur toutes les pages, comme le demande le test 12.7.2.

Il est masqué sans quitter le parcours au clavier. Au repos, le lien est réduit à un pixel et découpé par clip-path ; dès qu’il reçoit le focus, il retrouve sa taille, par-dessus la page, en haut à gauche. Un masquage par display: none ou visibility: hidden ne convient pas : selon la spécification CSS Display, une boîte invisible est retirée de la navigation, comme avec display: none. Le lien ne recevrait plus le focus, il ne pourrait donc jamais apparaître.

La cible reçoit vraiment le focus. Quand on suit un lien vers un fragment, la spécification HTML fait défiler la page jusqu’à la cible, tente de lui donner le focus, puis y place le point de départ de la navigation séquentielle. Un élément main ne peut pas recevoir le focus par défaut. Avec tabindex="-1" , il le peut, sans entrer dans l’ordre de tabulation : le focus se pose sur la zone, et la touche Tab reprend à partir d’elle. Le navigateur peut alors dessiner un contour autour de la zone, qui montre où la lecture reprend.

La cible est l’élément main. Le test 9.2.1 demande que la zone de contenu principal soit structurée par une balise main, visible et unique dans la page. Le même test réserve l’élément nav aux zones de navigation principales et secondaires : le code range les liens dans une simple liste quand il y en a plusieurs.

Le lien reste lisible. Son texte fait 16 px en gras : pour le critère 3.2, sous 18,5 px en gras, le contraste avec le fond doit atteindre 4,5:1. L’outil le calcule avec la formule du glossaire du RGAA et refuse un couple de couleurs plus faible. Le contour du focus prend la couleur du texte et se dessine à l’intérieur du lien : il contraste avec le fond du lien, quelle que soit la couleur de la page derrière.

Vérifier au clavier

1. Chargez une page du site, cliquez dans la barre d’adresse puis appuyez sur Tab : le lien apparaît, en principe avant tout autre élément (technique G1).
2. Appuyez sur Entrée : la page descend jusqu’au contenu principal.
3. Appuyez de nouveau sur Tab : le focus doit atteindre le premier lien ou champ du contenu, pas le menu.
4. Recommencez sur quelques gabarits différents : accueil, article, formulaire.

Sur une page en ligne, l’analyseur cherche le lien, vérifie que sa cible existe et qu’il apparaît quand il reçoit le focus.

Sources

RGAA 4.1.2, critère 12.7 (lien d’évitement ou d’accès rapide) ; RGAA 4.1.2, critère 12.6 (zones de regroupement de contenus) ; RGAA 4.1.2, critère 9.2 (structure du document) ; RGAA 4.1.2, critère 3.2 (contraste du texte) ; RGAA 4.1.2, glossaire : Liens d’évitement ou d’accès rapide ; RGAA 4.1.2, glossaire : Zone de contenu principal ; WCAG 2.1, critère de succès 2.4.1 Bypass Blocks, en anglais ; Technique G1 des WCAG : lien vers le contenu principal en haut de page, en anglais ; HTML Living Standard : défilement vers un fragment, en anglais ; CSS Display Level 3 : la propriété visibility, en anglais ; HTML Living Standard : l’attribut tabindex, en anglais .

Page mise à jour le 11 novembre 2026.