Identifier l’étape où le parcours clavier échoue
Le sous-menu fonctionne au survol de la souris, mais reste fermé quand on utilise Tab. Dans un autre cas, il s’ouvre puis disparaît avant que le premier lien soit atteint. Il peut aussi rester visible alors que le focus, c’est-à-dire l’élément prêt à recevoir l’action du clavier, n’est plus repérable. Ces défauts appellent des corrections différentes.
Le résultat recherché comprend toute la séquence : atteindre la commande, ouvrir le sous-menu, parcourir ses liens, suivre une destination ou refermer, puis poursuivre dans la page. L’ouverture seule ne suffit pas. Un menu qui exige une vitesse de frappe particulière ou un mouvement de souris pour sortir de son panneau reste problématique.
Commencez sur une adresse publique précise, avec un navigateur et une largeur notés. Comparez une visite déconnectée et l’état où le défaut était signalé. Gardez une capture des réglages avant de modifier l’en-tête, car sa structure et ses menus peuvent être partagés entre plusieurs pages.
Ce guide concerne les listes de liens d’une navigation de site. Il distingue les réglages natifs du bloc Navigation, les styles personnalisés qui empêchent le parcours et le remplacement éventuel d’un composant classique inadéquat. Une extension ou quelques attributs ARIA ajoutés au hasard ne constituent pas une réparation automatique.
Tester la séquence sans aider le menu avec la souris
Rechargez la page puis placez le pointeur hors de la navigation. Utilisez seulement Tab pour avancer et Majuscule + Tab pour revenir. Notez le libellé atteint et l’indicateur visible. Si vous ouvrez préalablement le panneau à la souris, vous pouvez masquer précisément le défaut que vous cherchez.
Un lien permet normalement de rejoindre une destination ; un bouton commande une action comme ouvrir une liste. Sur un bouton de dépliage, Entrée ou Espace doit permettre l’activation prévue. Dans une navigation ordinaire, les liens et les boutons peuvent se parcourir avec Tab. Les touches fléchées peuvent compléter ce parcours, mais leur absence n’indique pas automatiquement une panne.
Observez le comportement de fermeture et la destination du focus. Dans un panneau modal, le focus peut rester à l’intérieur pendant l’ouverture ; il faut alors une sortie utilisable au clavier. Cette restriction temporaire n’est pas la même chose qu’un piège sans issue.
- Atteignez un élément contenant des liens enfants.
- Repérez son lien éventuel et son bouton d’ouverture.
- Ouvrez au clavier puis atteignez le premier et le dernier lien.
- Revenez en arrière et testez la fermeture, notamment Échap si le composant le prévoit.
- Vérifiez que vous pouvez poursuivre hors du composant.
- Relevez la première étape défaillante avant de modifier un réglage.
Distinguer navigation de site et menu applicatif
Le mot menu recouvre plusieurs modèles d’interaction. Une navigation de site peut rester une liste de liens avec des boutons qui montrent ou cachent les sous-listes. Elle n’a pas besoin d’adopter automatiquement les rôles ARIA menu et menubar, qui entraînent des attentes de fonctionnement plus complexes pour les technologies d’assistance.
N’ajoutez pas ces rôles pour faire disparaître un message d’un analyseur sans comprendre le composant. Ajouter un rôle ne rend pas un élément actionnable, n’écrit pas le code de fermeture et ne gère pas le focus. De même, un attribut aria-expanded doit refléter l’état réel du panneau ; le figer à true n’ouvre pas correctement ce panneau.
Préférez les commandes déjà fournies par le bloc ou un composant maintenu. Si le parent mène aussi à une page, les visiteurs doivent pouvoir atteindre cette destination tout en ouvrant ses enfants. Un bouton séparé peut répondre à ce besoin. Un parent transformé en commande exige de conserver sa destination ailleurs dans la navigation.
Vous pouvez également rendre les pages enfants accessibles depuis la page de rubrique. Cette voie complète le menu et aide les utilisateurs qui évitent les listes déroulantes. Elle ne dispense pas de corriger un sous-menu rendu inutilisable au clavier, mais offre une autre entrée concrète vers les mêmes contenus.
Régler l’ouverture native du bloc Navigation
Avec un thème de blocs, ouvrez Apparence → Éditeur puis le modèle ou la partie d’en-tête réellement utilisée. Dans la Vue en liste, sélectionnez le bloc Navigation parent. Sa barre latérale Réglages propose le comportement des sous-menus, avec la visibilité au survol ou au clic et l’affichage de la flèche.
Conservez les valeurs actuelles, puis essayez une ouverture au clic si le comportement actuel pose problème. Dans le rendu natif vérifié de WordPress 7.1.4, ce choix utilise le libellé du parent comme bouton de sous-menu. Il ne faut donc pas supposer que ce même libellé continue à mener à sa page. Si cette destination doit rester accessible, conservez-la comme lien enfant, selon le parcours suivant.
Le mode au survol avec flèche peut fournir un lien et une commande distincts dans le rendu natif. Le terme survol du réglage ne permet donc pas de conclure que le composant ignore forcément le clavier ; vérifiez son comportement réel et les styles qui lui sont ajoutés.
- Relevez le mode et l’affichage de la flèche.
- Choisissez le comportement voulu et conservez les destinations nécessaires.
- Enregistrez le modèle ou la partie modifiée.
- Recommencez le parcours au clavier sur la page publique.
- Vérifiez ouverture, liens et fermeture, puis une autre page utilisant l’en-tête.
- Si le résultat ne convient pas, rétablissez les valeurs initiales et la structure conservée.
Conserver la page de rubrique lorsqu’un parent devient une commande
Prenons un exemple : Services mène à une page générale et contient plusieurs pages enfants. Si le mode choisi transforme Services en bouton d’ouverture, la page générale doit garder une entrée explicite. Ajouter un lien Présentation des services dans la sous-liste permet de conserver cette destination sans demander au même geste de naviguer et d’ouvrir.
Dans la Vue en liste du menu, sélectionnez le sous-menu concerné. Utilisez son bouton d’ajout pour insérer la page existante parmi ses liens, puis placez-la à l’endroit voulu. Vérifiez l’URL et le libellé. Vous ajoutez un lien de navigation vers la page existante, pas une nouvelle page ni une copie de son contenu.
Enregistrez puis testez le parent et cette nouvelle entrée au clavier. Le parent doit commander l’ouverture prévue ; le lien enfant doit rejoindre la page générale. Vérifiez aussi le toucher sur téléphone et le comportement des autres parents. Un changement de mode peut concerner toute la navigation, pas seulement cet exemple.
Pour annuler, remettez le mode précédent puis retirez le seul lien ajouté si cela correspond à votre choix initial. Ne supprimez pas la page Services elle-même. Si le menu est partagé entre plusieurs blocs, contrôlez leurs usages avant de modifier sa structure : une nouvelle entrée peut s’afficher dans chacun d’eux.
Repérer une surcharge CSS qui referme ou cache les liens
Si les réglages natifs semblent corrects, inspectez le sous-menu sur la page publique. Recherchez les règles qui imposent display, visibility, opacity, une hauteur fixe ou un débordement masqué. Comparez ce qui se passe lors du survol et lorsque le bouton ou un lien enfant reçoit réellement le focus.
Une règle personnalisée limitée à :hover peut afficher la liste pour la souris puis la masquer dès que le pointeur sort. Si elle remplace le fonctionnement prévu par le composant, le clavier peut atteindre un panneau invisible ou perdre son parcours. Une règle appliquée au parent peut produire le défaut même si les liens eux-mêmes sont bien réglés.
Décochez temporairement la déclaration suspecte dans Styles, puis recommencez le test au clavier. L’inspection aide à identifier sa source ; elle ne modifie pas le site. Si cette suppression temporaire rétablit le parcours, copiez votre CSS additionnel et retirez seulement la surcharge confirmée dans son éditeur d’origine.
Le résultat attendu est le maintien de la sous-liste pendant l’usage prévu, sans rendre tous les panneaux visibles en permanence. Le rechargement annule l’essai du navigateur ; remettre le CSS conservé annule la correction enregistrée. Si un script commande l’état, une simple règle :focus-within ne remplace pas sa gestion des boutons, de la fermeture et des états accessibles.
Rétablir un indicateur de focus sur la navigation concernée
Le parcours peut fonctionner alors que rien ne montre quel lien est actif au clavier. Commencez par retrouver une éventuelle règle personnalisée qui retire les contours, comme outline: none. Si sa suppression rétablit l’indicateur prévu par le thème, cette correction de source est préférable à l’ajout d’une seconde règle.
Pour un bloc Navigation natif nécessitant un indicateur spécifique, ajoutez navigation-clavier, sans point, dans Avancé → Classe(s) CSS additionnelle(s), en conservant les classes existantes. Le code ci-dessous vise seulement les liens et boutons descendants de ce bloc. La couleur bleue est un exemple pour un fond clair ; adaptez-la après vérification sur les fonds réels, y compris celui du panneau ouvert.
Placez la règle complète dans le CSS additionnel du site : Apparence → Personnaliser → CSS additionnel pour un thème classique, ou Apparence → Éditeur → Styles → menu à trois points → CSS additionnel pour un thème de blocs. Ce n’est pas un fragment à placer dans un champ qui attend seulement les propriétés d’un type de bloc.
Testez avec Tab pour voir le contour autour de chaque commande atteinte. Vérifiez qu’il n’est pas coupé par un parent et qu’une règle plus prioritaire ne l’annule pas. Pour revenir en arrière, retirez la seule règle et la classe ajoutées. Ce code rend le focus perceptible ; il ne crée ni l’ouverture ni la fermeture d’un sous-menu.
.navigation-clavier a:focus-visible,
.navigation-clavier button:focus-visible {
outline: 3px solid #174ea6;
outline-offset: 3px;
}Corriger le composant d’un thème classique sans reconstruire les liens
Dans un thème classique, Apparence → Menus permet de gérer les destinations et les emplacements, mais ne crée pas à lui seul le comportement clavier du thème. Si les sous-menus ne disposent d’aucune commande utilisable, examinez le panneau de navigation documenté par ce thème et les personnalisations ajoutées à son en-tête.
Recherchez un mode d’ouverture au clic ou une option de navigation accessible réellement fournie par ce composant. Conservez ses valeurs, appliquez l’option sur une copie puis refaites la séquence complète. Si une mise à jour du thème corrige ce comportement, sauvegardez ses personnalisations avant de l’essayer sur cette copie ; gardez le paquet précédent pour un retour maîtrisé.
Un lien dont l’adresse est seulement # ne devient pas un bouton accessible par magie. De même, donner un ordre de tabulation positif à tous les éléments ne répare pas leur logique et peut produire un parcours incohérent avec le reste de la page. Corrigez le composant plutôt que d’accumuler ces contournements.
Si le thème n’offre aucune solution satisfaisante, vous pouvez simplifier la navigation ou remplacer son composant sur un emplacement compatible. Conservez les menus et leurs liens existants. Le résultat attendu est un parcours reproductible sans souris ; pour annuler un réglage, remettez sa valeur initiale. N’annoncez pas une correction uniquement parce que les liens restent visibles au survol.
Option de remplacement ciblé avec Max Mega Menu
Max Mega Menu peut être essayé sur un emplacement de menu classique déjà enregistré et affiché par le thème. Le produit, publié sous l’auteur megamenu, dispose d’un parcours de navigation au clavier documenté. La version 3.10.10 vérifiée demande WordPress 6.2 et PHP 7.4 minimum et déclare un test jusqu’à WordPress 7.1.4. Le parcours de base décrit ici n’exige pas une fonction Pro.
Conservez l’affectation et les réglages actuels, puis installez l’extension sur une copie depuis Extensions → Ajouter une extension, en vérifiant son nom et son auteur. Activez l’intégration pour le seul emplacement concerné. L’extension ne peut pas améliorer un emplacement que l’en-tête n’affiche pas.
Dans Mega Menu → Menu Locations, ouvrez l’emplacement voulu. Dans Desktop, le réglage Event propose notamment Click. Choisissez ce comportement si c’est le parcours souhaité, enregistrez et testez le bouton ou le lien produit. Vérifiez les destinations des parents et les liens enfants ; le comportement au toucher peut disposer de réglages distincts.
Le résultat doit permettre le parcours naturel au clavier, avec un focus repérable et une sortie. Contrôlez les styles résiduels du thème et un éventuel second bouton. La déclaration d’accessibilité du produit ne certifie pas le résultat de votre site. Pour annuler l’essai, désactivez l’intégration de cet emplacement ou la seule extension nouvellement ajoutée et vérifiez le retour à la navigation d’origine.
Assurer une fermeture et une sortie compréhensibles
Après ouverture, vérifiez comment le composant se referme et où revient le focus. Dans une navigation à boutons de dépliage, une nouvelle activation peut refermer la liste ; Échap constitue aussi une commande courante à tester selon le composant. Le visiteur ne doit pas avoir besoin de cliquer ailleurs avec une souris pour continuer.
Un panneau mobile modal peut maintenir le focus à l’intérieur pendant qu’il est ouvert. Ce choix peut être cohérent si sa fermeture est accessible et que le parcours revient ensuite à la page. Il devient problématique si aucune commande utilisable au clavier ne permet d’en sortir, ou si le bouton de fermeture est invisible et impossible à repérer.
Ne tentez pas de réparer un piège en supprimant tous les scripts de gestion du focus. Vous pourriez laisser le clavier parcourir des éléments cachés derrière le panneau. Identifiez le composant responsable et testez son réglage ou sa correction sur une copie, en conservant le fonctionnement d’ouverture et de fermeture comme un ensemble.
Le résultat attendu est une séquence prévisible : entrée dans la navigation, accès aux liens, fermeture et reprise du parcours. Si un remplacement de composant dégrade cette séquence, revenez à sa configuration précédente. Conservez une voie claire vers les contenus pendant la correction, par exemple une page de rubrique avec les liens enfants, sans présenter cette voie de secours comme une réparation du sous-menu.
Contrôler les petits écrans, le zoom et les liens réellement atteints
Refaites le parcours à une largeur de téléphone et à une largeur intermédiaire. Le composant peut changer d’apparence, de disposition ou de commande. Un sous-menu utilisable sur ordinateur ne garantit pas le même résultat dans le panneau mobile. Testez aussi le toucher, puis un clavier si le contexte mobile utilisé le permet.
Augmentez le zoom du navigateur et vérifiez que le focus reste visible et que les liens ne sont pas coupés. Un en-tête fixe peut recouvrir un élément atteint ; un panneau trop court peut cacher les derniers liens. Comparez la zone visible avec l’élément réellement prêt à être activé, plutôt que de conclure que la touche Tab a cessé de fonctionner.
Suivez une destination et revenez à la page précédente. Contrôlez ensuite un autre sous-menu, puis une autre page utilisant l’en-tête partagé. Si le site contient plusieurs niveaux, testez les niveaux réellement nécessaires. Un premier niveau correct peut masquer un problème plus profond.
Ces contrôles fonctionnels ne constituent pas à eux seuls un audit complet d’accessibilité. Ils vérifient le parcours décrit et permettent de repérer les régressions les plus directes. Consignez les navigateurs, les largeurs et les étapes réalisées sans inventer une compatibilité avec toutes les technologies d’assistance. Un besoin de validation plus large doit faire l’objet d’essais adaptés sur le site réel.
Conserver la correction et un scénario de contrôle réutilisable
Avant de considérer le guide appliqué, rechargez le site dans sa configuration normale et en visiteur déconnecté. Vérifiez que l’ancien CSS ou une ancienne page en cache ne masque pas le résultat. Actualisez seulement les caches concernés avec l’outil déjà utilisé, après avoir confirmé que le bon objet a été enregistré.
Gardez les réglages de départ, les règles retirées et l’éventuelle classe ajoutée. Notez le modèle, la partie d’en-tête et le menu concernés. Si une extension a été introduite, conservez son emplacement d’intégration et le motif de ce choix. Vous pourrez ainsi annuler une modification ciblée sans supprimer les menus ou les pages.
Préparez un scénario court pour les prochaines mises à jour : atteindre le parent avec Tab, ouvrir, parcourir les enfants, suivre un lien, refermer puis quitter la navigation. Rejouez-le après un changement de thème, de constructeur ou de traitement JavaScript. Un contrôle visuel à la souris ne remplace pas cette séquence.
Si le défaut persiste, transmettez la page publique, le composant et la première étape qui échoue, avec les réglages et les comparaisons déjà effectués. Précisez si le focus manque, si le panneau se ferme ou si un lien est introuvable. Cette description permettra de corriger le comportement réel plutôt que d’ajouter un marquage accessible sans effet fonctionnel.
Comparer l’état annoncé avec la visibilité du lien
Dans le banc WordPress, le sous-menu s’ouvre au clic et contient un lien enfant vers une page témoin. Une règle de test impose visibility: hidden à la sous-liste quand le pointeur se trouve en dehors de la rubrique. À la souris, un clic sur la commande affiche le lien. Au clavier, Entrée fait passer aria-expanded à true. Le lien reste masqué et Tab passe au lien suivant, en dehors de la navigation. La commande réagit et le style empêche l’accès au lien enfant.
Sur votre copie, commencez par reproduire le parcours sans pointeur au-dessus du menu. Relevez l’état du bouton après Entrée et vérifiez si la sous-liste s’affiche. Dans l’inspecteur, sélectionnez cette sous-liste et regardez la valeur calculée de visibility, puis la règle qui l’impose. Comparez ce résultat à un clic de souris. Si une règle de votre thème ou du CSS additionnel change le résultat selon le survol, désactivez-la temporairement dans l’inspecteur et refaites le parcours clavier avant d’enregistrer une modification.
Vérifier l’aller et le retour du focus
Après retrait de la règle de test, Entrée ouvre la liste et Tab atteint le lien enfant visible. Maj et Tab ramènent à la commande. Avec le focus sur le lien, Échap ferme la liste et restitue le focus à la commande. Le banc a également rouvert le sous-menu avec Espace et suivi le lien jusqu’à une page qui répond 200.
Sur la copie du site, répétez ce parcours pour une rubrique dont la destination est connue. Vérifiez l’indicateur de focus à chaque étape. Contrôlez le libellé du lien et le titre de la page ouverte. Recommencez depuis la rubrique suivante et vérifiez que la navigation principale reste praticable une fois le panneau fermé. Si la correction affecte d’autres sous-menus, revenez au CSS sauvegardé et précisez la règle ou le composant visé.
Noter la première étape qui échoue
Notez le nom de la commande, la première touche qui pose problème, la visibilité du panneau, l’élément qui reçoit le focus et le résultat du clic à la souris. Si Tab atteint la commande mais qu’Entrée laisse son état fermé, regardez d’abord le type de commande et le script qui doit gérer l’ouverture. Si l’état passe à ouvert et que les liens restent cachés, examinez le style du panneau et de ses parents. Si le lien est visible mais que Tab le saute, vérifiez aussi qu’il a une destination et que le composant ne le retire pas de l’ordre de navigation.
Le test local vérifie le focus, l’ouverture, la fermeture et le lien avec le bloc Navigation natif et Chrome. Pour un site qui utilise un autre composant ou des technologies d’assistance, reprenez les mêmes étapes avec les outils concernés. Conservez le relevé avant et après pour que le prochain contrôle reproduise le parcours complet.
