ACCESSIBILITÉ ≠ OVERLAY · 38
Focus clavier visible quand un en-tête fixe masque l’étape suivante
📅 11 novembre 2026 · ⏱ 6 min de lecture
En appuyant sur Tab, le navigateur peut déplacer le focus vers une commande située derrière un en-tête fixe. La page réagit toujours, mais la personne perd le repère visuel dont elle a besoin pour continuer.
01. Tester un parcours de réservation
Ouvrez une page de réservation et choisissez une date au clavier. En avançant avec Tab, vous vous attendez à trouver le lien qui explique les changements ou le bouton pour continuer. Le document défile de quelques pixels et le contour disparaît. Le focus a atteint la bonne commande, mais l’en-tête fixé en haut la recouvre. Appuyer sur Entrée peut déclencher l’étape suivante sans que vous ayez vu quelle action vous alliez activer.
Cette situation passe facilement inaperçue lors d’une vérification à la souris. Le pointeur indique l’emplacement choisi et permet d’ajuster le défilement avant d’agir. Au clavier, le navigateur suit l’ordre du document et décide quand déplacer la vue. Conservez cette séquence pendant le test. Un défilement manuel avant l’observation peut masquer le défaut que vous cherchez à reproduire.
02. Distinguer le focus, son indicateur et son ordre
Le focus identifie l’élément qui reçoit les entrées du clavier. L’indicateur est le signal visuel qui permet de le localiser. L’ordre détermine quelle commande vient ensuite. Un en-tête superposé peut recouvrir un bouton doté d’un bon indicateur. À l’inverse, un bouton peut rester en vue sans montrer de signal lorsqu’il reçoit le focus. Une commande bien visible peut également recevoir le focus à un moment incohérent du parcours.
Notez la commande attendue et celle qui reçoit effectivement le focus. Avec les outils du navigateur, inspectez l’élément actif sans changer le focus de la page ou répétez la séquence après avoir préparé l’inspecteur. Comparez le rectangle de la commande à celui de la couche superposée. La capture montre le symptôme. Les étapes clavier et l’état du composant permettent de le reproduire.
03. Les exigences des WCAG 2.2
Le critère 2.4.7, de niveau AA, concerne la visibilité de l’indicateur de focus. Le critère 2.4.11, également AA, vérifie qu’une commande focalisée ne soit pas entièrement masquée par du contenu créé par le site. Évaluez-les séparément. Un petit fragment visible du bouton peut éviter une occultation totale tout en restant insuffisant pour comprendre aisément l’action.
Le critère 2.4.12, de niveau AAA, traite de l’occultation partielle. Comme objectif de conception, gardez toute la commande et son signal visibles. Le critère 2.4.3, de niveau A, vérifie que l’ordre séquentiel préserve le sens et l’utilisation lorsque la séquence a un effet sur eux. Un en-tête fixe peut entraîner l’échec d’une exigence même si les autres sont satisfaites. Décrivez le comportement observé dans le rapport et citez le critère correspondant.
04. Repérer la couche qui prend la place du contenu
Un en-tête fixe peut changer de hauteur au défilement, à l’ouverture du menu ou lorsque la fenêtre rétrécit. Un avis en bas, une barre d’actions ou un panneau d’aide peuvent occuper une autre partie de la même fenêtre. Chaque composant peut fonctionner isolément et laisser très peu de place lorsqu’ils sont combinés. La hauteur pertinente est celle de l’état où survient le défaut.
Vérifiez quel conteneur défile. Sur une page simple, c’est souvent le document. Dans une application, il peut s’agir d’un panneau interne doté de son propre défilement et de sa propre barre. Un réglage sur le document peut rester sans effet sur ce panneau. Désactivez temporairement la position fixe dans l’inspecteur et rejouez la séquence. Si la commande réapparaît, vous avez une hypothèse à vérifier dans le modèle.
05. Réserver de la place dans le conteneur défilant
Une solution consiste à définir scroll-padding-block-start sur le conteneur défilant pour tenir compte de la hauteur de l’en-tête. En présence d’une barre fixe en bas, évaluez scroll-padding-block-end. La technique C43 du W3C montre comment combiner cette marge de défilement avec un espace réel pour que le dernier élément puisse sortir de derrière une barre. Examinez le début et la fin du parcours, car le défilement a des limites.
Une hauteur reprise de la version de bureau peut être insuffisante si le menu occupe deux lignes. Employez des valeurs qui reflètent les états du modèle et testez les redimensionnements. Sur une fenêtre basse, laisser la couche défiler avec le contenu peut être préférable. Vérifiez le défilement automatique lors du focus et les liens internes, qui peuvent aussi placer du contenu tout près de l’en-tête.
06. Rendre le signal visible dans chaque état
Conservez l’indicateur fourni par le navigateur ou concevez-en un qui se distingue sur les fonds réels du site. Un contour bien visible sur une carte blanche peut se perdre dans un menu bleu. Testez les boutons principaux, liens de texte, icônes et champs. Examinez les états normal et visité ainsi que le contraste dans le contexte de chaque commande.
Le sélecteur CSS :focus-visible permet de styliser le signal quand le navigateur juge utile de l’afficher. Évitez de supprimer partout le contour sans solution de remplacement testée. Repérez les conteneurs qui coupent le contour avec overflow et les modules qui le masquent en se superposant. Si la commande devient identifiable seulement au survol, revenez au clavier et vérifiez quel état le thème met en forme.
07. Répéter dans les deux sens et avec agrandissement
Partez d’un état reproductible et consignez le navigateur, la taille de la fenêtre et le zoom. Avancez avec Tab et revenez avec Maj+Tab. Observez chaque commande au moment où elle reçoit le focus. Testez les limites haute et basse et le dernier élément d’un panneau. Certaines couches couvrent le contenu seulement au retour, quand le navigateur défile dans le sens opposé.
Recommencez avec l’en-tête déployé, le menu fermé et les avis habituels d’une première visite. Sur une fenêtre étroite ou agrandie, le texte peut passer sur plusieurs lignes et réduire la hauteur disponible. Un bref enregistrement de la séquence aide à distinguer un saut de défilement d’un changement de focus. La personne doit pouvoir identifier la commande actuelle avant de décider de l’activer.
08. Corriger le modèle Divi et vérifier le parcours
Dans WordPress, déterminez si l’en-tête vient du thème, d’un modèle du Theme Builder ou d’un module qui reste fixe. Identifiez le réglage de hauteur et la règle qui contrôle le défilement. Corrigez le composant responsable du chevauchement et vérifiez les pages qui le réutilisent. Incluez une page longue, un formulaire et un parcours comportant des liens internes.
Un overlay peut fournir des réglages de présentation. La géométrie de l’en-tête, l’ordre du focus et l’espace réservé relèvent de l’implémentation. Un outil automatique peut signaler certains problèmes. Pour valider la correction, refaites la réservation au clavier, voyez chaque commande au moment utile et confirmez qu’il est possible d’avancer ou de revenir en gardant ses repères. Conservez les étapes avec le résultat pour la prochaine évolution du modèle.