Expliquer l’ouverture dans un nouvel onglet

Silktide repère les liens qui s’ouvrent dans un nouvel onglet ou une nouvelle fenêtre et signale ceux qui ne le précisent pas. Les internautes doivent être avertis avant qu’un lien ne les fasse quitter la page sur laquelle ils se trouvent.

Pourquoi c’est important

Ouvrir un nouvel onglet sans avertissement va à l’encontre des attentes de l’internaute: le bouton Retour cesse de fonctionner, et il se peut qu’il ne remarque même pas qu’un nouvel onglet a été ouvert. Les utilisateurs de peuvent ne pas entendre d’indication que le contexte a changé, et les personnes ayant des difficultés cognitives ou une expérience limitée du Web peuvent se retrouver bloquées, sans savoir comment revenir. Quelques mots d’avertissement dans le texte du lien évitent tout cela.

La meilleure solution est souvent de ne pas ouvrir de nouveaux onglets du tout - laissez les internautes choisir. Lorsque vous devez le faire, ce contrôle vérifie que le lien l’indique, conformément au critère de réussite 3.2.5 (Changement sur demande), une exigence de .

Comment corriger

Il est préférable de supprimer target="_blank" pour que le lien s’ouvre normalement.
Lorsque l’ouverture dans un nouvel onglet est justifiée, ajoutez une explication au texte du lien:

<a href="products.html" target="_blank">
  Produits (s'ouvre dans un nouvel onglet)
</a>

Pour un lien image, placez l’explication dans le :

<a href="products.html" target="_blank">
  <img src="products.jpg" alt="Produits (s'ouvre dans un nouvel onglet)">
</a>

Pour traiter plusieurs liens à la fois, le peut ajouter le texte automatiquement:

\/* Ajoute l'avertissement à chaque lien ouvrant un nouvel onglet *\/ 
 a[target="_blank"]::after {
  content: " (s'ouvre dans un nouvel onglet)";
}

Vous pouvez aussi utiliser une étiquette , qui change ce qui est annoncé sans modifier l’apparence du lien. Notez que aria-label remplace entièrement le texte du lien, il doit donc le répéter:

<a href="products.html" target="_blank" aria-label="Produits (s'ouvre dans un nouvel onglet)">
  Produits
</a>

Une icône seule ne suffit pas - l’avertissement doit exister sous forme de texte qu’un lecteur d’écran peut annoncer (le texte alternatif de l’icône est pris en compte).

Comment Silktide vérifie ce point

Rechercher chaque lien sur la page avec target="_blank", l’attribut qui ouvre un nouvel onglet ou une nouvelle fenêtre, en ignorant les éléments que vous avez exclus de la vérification.
Rassembler le texte lisible de chaque lien: son contenu textuel, le texte alternatif et le texte de titre des éléments qu’il contient, toute étiquette ARIA, ainsi que le texte ajouté avec le CSS ::before et ::after.
Valider le lien si ce texte contient une explication reconnue: "nouvel onglet", "nouvelle fenêtre", "nouvel onglet du navigateur", "nouvelle fenêtre du navigateur" ou "lien externe" (les équivalents gallois sont également reconnus).
Signaler tout autre lien ouvrant un nouvel onglet.

Dépannage

Mon lien l’explique avec d’autres mots

Seules les expressions ci-dessus sont reconnues. Si votre formulation est un véritable équivalent, par exemple "s’ouvre dans une fenêtre contextuelle", soit normalisez-la en une expression reconnue, soit la détection.

Fenêtre ou onglet?

Presque tous les navigateurs modernes ouvrent les liens target="_blank" dans un onglet, donc "s’ouvre dans un nouvel onglet" est généralement la formulation la plus claire, bien que les deux soient acceptées.