Le signalement venait d’une utilisatrice de NVDA testant un site associatif : « quand je navigue par liens avec la touche K, le lien Accueil du menu apparaît deux fois d’affilée, avec exactement le même texte ». Premier réflexe, souvent trompeur : soupçonner un bug du lecteur d’écran ou un défaut de mise en cache. En réalité, dans l’immense majorité des cas, ce genre de doublon provient d’une duplication bien réelle dans le DOM, invisible à l’œil parce que masquée en CSS ou simplement superposée visuellement.
Ce diagnostic est un bon exercice pour comprendre comment les lecteurs d’écran regroupent l’information par repère : un lien identique répété dans deux zones de navigation distinctes du DOM est annoncé deux fois, même si visuellement une seule des deux zones est réellement visible à l’écran.
Reproduire le symptôme
Avec NVDA lancé, la touche K (raccourci de navigation rapide par liens) permettait de confirmer : le lien « Accueil » apparaissait bien deux fois consécutivement dans la liste des liens de la page, avec la même destination, le même texte visible.
Diagnostic : inspecter le DOM complet, pas seulement le rendu visuel
Une recherche dans le code source de la page (affichage du code source complet, pas seulement l’inspecteur d’éléments qui peut cacher des nœuds selon le point où l’on clique) a révélé la cause : le thème affichait un menu de navigation principal dans header.php, mais un widget de menu personnalisé, ajouté par un précédent prestataire dans la zone d’en-tête secondaire du thème (une zone de widgets prévue à l’origine pour un simple message d’annonce), reproduisait exactement le même menu, avec un CSS qui le masquait visuellement via visibility: hidden plutôt que display: none.
<nav class="menu-principal">
<a href="/">Accueil</a>
<a href="/associations/">Nos associations</a>
</nav>
<!-- Plus bas dans le DOM, widget oublié : -->
<div class="widget-annonce-masque">
<nav class="menu-secondaire-inutilise">
<a href="/">Accueil</a>
<a href="/associations/">Nos associations</a>
</nav>
</div>Rappel utile pour ce genre de diagnostic : contrairement à display: none, la propriété visibility: hidden retire bien l’élément du rendu visuel, mais certains lecteurs d’écran, selon leur configuration et le navigateur utilisé, continuent d’exposer son contenu textuel dans l’arbre d’accessibilité si l’élément parent n’utilise pas la bonne propriété de masquage. C’est précisément ce qui s’est produit ici.
Le correctif
Deux solutions possibles selon le contexte du projet : soit supprimer purement et simplement le widget devenu inutile depuis la refonte du thème, soit, si son contenu doit réellement rester dans le DOM pour une raison technique (un script tiers qui en dépend, par exemple), remplacer visibility: hidden par display: none, qui retire l’élément de l’arbre d’accessibilité de façon fiable sur tous les lecteurs d’écran testés.
.widget-annonce-masque {
display: none;
}Dans ce dossier précis, l’option retenue a été la suppression pure du widget : plus aucune trace du menu dupliqué n’était nécessaire, il s’agissait d’un reliquat d’une ancienne version du thème jamais nettoyé.
Une méthode générale pour ce type de doublon
- Rechercher dans le code source complet (pas l’inspecteur seul) toutes les occurrences du texte du lien signalé en double.
- Pour chaque occurrence, vérifier la méthode de masquage CSS appliquée à ses parents :
display: none,visibility: hidden, positionnement hors-écran, ou aucun masquage du tout. - Utiliser l’onglet Accessibilité des outils de développement de Firefox pour confirmer si l’élément suspect apparaît réellement dans l’arbre d’accessibilité malgré son masquage visuel.
Prévention
Ce genre de reliquat s’accumule souvent après plusieurs refontes successives d’un même site, chaque prestataire ajoutant sans toujours retirer proprement ce que le précédent avait laissé. Un nettoyage périodique des zones de widgets inutilisées, couplé à une revue rapide du DOM avec l’onglet Accessibilité, permet de repérer ces doublons avant qu’un utilisateur ne les signale.
En résumé
Un lien annoncé deux fois par un lecteur d’écran n’est presque jamais un défaut du logiciel : c’est le signe fiable d’une duplication réelle dans le DOM, généralement masquée visuellement par une propriété CSS qui ne retire pas l’élément de l’arbre d’accessibilité. Le code source complet, pas l’inspecteur visuel seul, reste le meilleur point de départ pour la retrouver.
