skip-link

Le lien d’évitement doit avoir une cible résoluble et utilisable

Vérifie que le fragment de l’href d’un lien « aller à ... » se résout en un élément réel et actuellement utilisable du document.

Applicabilité. S’applique aux éléments <a href="#fragment"> qui sont des liens d’évitement d’après l’un de deux signes :

• le nom accessible suit une formulation courante de lien d’évitement dans l’une des langues fournies : « skip » ou « jump to » (anglais) ; « aller au contenu », « passer au contenu », « accéder au contenu », « accès direct », « évitement » (français) ; « springen », « überspringen », « direkt zum », « zum Inhalt » (allemand) ; « saltar », « ir al contenido » (espagnol) ; « スキップ », « 本文へ » (japonais). « jump to » figure à côté de « skip » parce que les vrais liens d’évitement utilisent les deux conventions (p. ex. un lien « Jump to section ») ;
• ou c’est le premier lien du document et il précède l’élément main (ou un élément dont l’attribut role se résout en main, son premier vrai jeton de rôle, sans tenir compte de la casse) : l’emplacement habituel d’un lien d’évitement, quelle que soit sa formulation.

Les autres liens d’ancre vers la même page ne sont pas des liens d’évitement et ne sont pas examinés. Lorsque la page n’a ni <main> ni role="main", un élément personnalisé auquel ses ElementInternals donnent le rôle main (this.attachInternals().role) est le main par rapport auquel se mesure la position d’un lien.

Attendu. Le fragment du lien se résout en un élément réel du document (via un id correspondant, ou un ancien <a name="...">), et cette cible est actuellement utilisable (non masquée de l’arbre d’accessibilité ; et, lorsque la géométrie du navigateur est disponible, rendue avec une surface qu’aucun ancêtre ne réduit à néant : un ancêtre en overflow: hidden réduit à une taille nulle, ou en overflow: clip qui la maintient à l’extérieur). Un lien d’évitement dont la cible est absente ou inutilisable dans les faits ne fournit pas de destination de contournement fiable. Une cible vide (sans élément ni texte à l’intérieur), comme <a id="content" tabindex="-1"></a> ou un ancien <a name>, n’a par nature aucune surface : suivre le lien lui donne le focus, ou y place le point de départ de la navigation séquentielle du focus (HTML, « scroll to the fragment »), si bien que la touche Tab suivante continue à partir de là. C’est ce qu’elle marque qui est mesuré à la place : son ancêtre le plus proche doté d’un contenu propre, comme le <main> qu’elle ouvre. Une cible en display: contents n’a pas de boîte propre, et est mesurée d’après celles de ses enfants.

Exemples

<a href="#target">Skip to content</a>
<div id="target">Target content</div>

<a href="#missing">Skip to main content</a>

<a href="#contenu">Aller au contenu</a>

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

Voir le code source