Liens pointant vers des destinations différentes

Silktide repère sur une page des liens qui partagent le même texte mais mènent à des destinations différentes. Lorsque deux liens identiques mènent à des endroits différents, il est impossible de les distinguer sans cliquer sur chacun d’eux.

<!-- Deux liens « Nouvelles » qui mènent à des pages différentes -->
<p>Découvrez les dernières nouvelles sur nos produits : <a href="/products/news">Nouvelles</a></p>
<p>Découvrez les dernières nouvelles sur nos services : <a href="/company/news">Nouvelles</a></p>

Pourquoi c’est important

Les personnes qui utilisent un affichent souvent une liste de tous les liens de la page, hors contexte. Deux liens qui s’annoncent tous deux comme « Nouvelles » mais mènent à des pages différentes sont indiscernables dans cette liste; l’utilisateur doit ouvrir chacun pour savoir où il mène. La même ambiguïté affecte les utilisateurs de la reconnaissance vocale, qui sélectionnent les liens en disant leur nom à voix haute.

Comment corriger

Donnez à chaque lien un texte visible distinct qui décrit sa destination, comme « Nouvelles sur les produits » et « Nouvelles de l’entreprise ».
Si le design ne peut pas changer, ajoutez un libellé pour distinguer les liens sans modifier ce que voient les personnes voyantes :

<!-- L’aria-label devient le nom annoncé par les lecteurs d’écran -->
<a href="/products/news" aria-label="Nouvelles sur les produits">Nouvelles</a>
<a href="/company/news" aria-label="Nouvelles de l’entreprise">Nouvelles</a>

Vous pouvez aussi inclure du texte supplémentaire à l’intérieur du lien, masqué visuellement mais lu par les lecteurs d’écran (par exemple un <span> stylé avec une classe CSS réservée aux lecteurs d’écran).
Si les liens sont fonctionnellement équivalents pour l’utilisateur — par exemple, s’ils redirigent vers la même page — le constat.

Comment Silktide effectue ce test

Repérez tous les liens de la page, en ignorant tout élément que vous avez exclu de la vérification.
Déterminez le de chaque lien — le texte annoncé par les , qui inclut les libellés ARIA et le des images, et pas seulement le texte visible.
Normalisez la destination de chaque lien pour la comparaison : les fragments (la partie après « # »), les chaînes de requête (la partie après « ? »), le schéma d’URL et les barres obliques finales sont ignorés.
Lorsque des liens ayant le même nom accessible pointent vers plus d’une destination distincte, signalez-les tous.

Dépannage

Les liens vers différentes sections de la même page ne sont pas signalés

Comme les fragments sont ignorés lors de la comparaison des destinations, des liens comme /guide#intro et /guide#pricing comptent comme la même destination. C’est intentionnel : les deux mènent à la même page.

Les liens qui ne diffèrent que par des paramètres de suivi ne sont pas signalés

Les chaînes de requête sont ignorées lors de la comparaison des destinations; ainsi, /offers?src=header et /offers?src=footer sont considérés comme la même page plutôt que comme des destinations différentes.