Reproduire précisément le blocage du visiteur
Une fenêtre de réservation s’ouvre au-dessus de la page. Le pointeur peut parfois la fermer, mais Tab passe derrière, ou bien le cadre se ferme et la page reste impossible à faire défiler. Notez l’adresse, le bouton ou l’action qui déclenche la fenêtre, la largeur de l’écran et le premier geste qui échoue. Ces symptômes peuvent venir de parties différentes du composant. Le réglage qui affiche la fenêtre peut fonctionner alors que sa fermeture ou le retour à la page échoue.
Testez un parcours complet dans une session de visiteur. Avec la souris, ouvrez la fenêtre et cherchez sa commande de fermeture. Puis rechargez l’état de départ et refaites le parcours au clavier. Atteignez le déclencheur avec Tab, activez-le, puis observez où arrive le focus. Parcourez les commandes visibles et essayez Échap. Si la fenêtre disparaît, pressez Tab une fois et observez la destination du focus. Vérifiez aussi le défilement et un lien de la page après la fermeture.
Un dialogue modal limite normalement l’interaction à sa fenêtre tant qu’elle est ouverte. Le parcours doit offrir une sortie au clavier. Un focus qui reste dans la fenêtre pendant l’ouverture peut donc être attendu. Un focus qui erre derrière la fenêtre ou demeure coincé sans sortie demande une correction. Sur téléphone, vérifiez si la fermeture reste atteignable après défilement du dialogue et ouverture du clavier virtuel.
Préparez une copie de travail et gardez une capture du déclencheur, de la fenêtre et du résultat après fermeture. Indiquez s’il existe un deuxième dialogue ouvert en même temps. Vous pourrez ainsi vérifier le retour à l’état initial après chaque essai.
Retrouver l’outil qui ouvre la fenêtre
Identifiez la provenance de la fenêtre avant de modifier la page. Si elle apparaît sur une seule adresse, ouvrez la page dans son éditeur et cherchez le bloc, le widget ou le lien qui la déclenche. Dans une page à blocs, utilisez la Vue en liste pour repérer un composant imbriqué. Si la fenêtre apparaît sur plusieurs pages, examinez l’en-tête, le pied de page, une composition synchronisée ou les règles d’un module de fenêtres. Certains composants sont injectés sur le site sans apparaître dans le corps de la page.
Avec un thème de blocs, ouvrez Apparence > Éditeur et identifiez le modèle ou la partie de modèle qui contient le déclencheur partagé. Avec un thème classique, consultez les options du thème et la liste des extensions autorisées. Dans un constructeur, vérifiez le modèle de fenêtre et les conditions qui l’affichent. Un changement appliqué à ce modèle peut toucher plusieurs adresses. Notez son nom et sa portée avant d’ouvrir les réglages.
Une image agrandie, un menu plein écran et un dialogue de réservation peuvent tous recouvrir la page. Examinez le contenu et le but avant de changer les réglages. Si seule l’image est concernée, cherchez les paramètres d’agrandissement du bloc. Si le menu mobile est en cause, examinez son composant de navigation. Pour un dialogue d’action, vérifiez son propre titre, ses commandes et le déclencheur qui a ouvert la fenêtre.
Si vous ne pouvez modifier que la page, transmettez au mainteneur l’adresse, le déclencheur et la liste des gestes qui échouent. Une capture du cadre et le nom de l’extension valent mieux qu’un essai global de désactivation sur le site public.
Rendre la fermeture atteignable dans le composant existant
Sur la copie, commencez par le réglage qui correspond au symptôme. Affichez une commande de fermeture dès l’ouverture et placez-la dans la fenêtre, dans une zone visible sur petit écran. Une icône seule doit avoir un nom accessible comme « Fermer la fenêtre ». Si vous pouvez utiliser un bouton avec ce texte visible, le repérage est plus simple. Évitez de réserver la sortie à un clic sur le fond, car ce geste ne fournit pas de commande de fermeture utilisable au clavier.
Si le site utilise déjà le Popup Builder Elementor, ouvrez le modèle depuis Elementor > Éditeur > Modèles > Popups selon le libellé de la version installée. Sélectionnez la fenêtre, puis ouvrez ses réglages. Vérifiez l’affichage du bouton de fermeture et le délai éventuel avant son apparition. Dans les réglages avancés, contrôlez l’option qui empêche la fermeture avec Échap. Rétablissez la possibilité de fermer avec cette touche lorsque le dialogue doit suivre le parcours modal usuel. La documentation réserve ce constructeur de fenêtres à certains plans Elementor Pro. Un site qui ne l’utilise pas peut appliquer les mêmes contrôles dans son propre composant.
Comparez les déclencheurs automatiques. Une fermeture qui fonctionne peut sembler défaillante si une autre règle rouvre la même fenêtre aussitôt. Sur la copie, désactivez seulement le déclencheur soupçonné ou limitez-le à une page de test. Ouvrez ensuite la fenêtre par son bouton et fermez-la. Gardez les réglages de fréquence et de portée avant l’essai.
Vérifiez enfin que le bouton ferme le dialogue correct. Si deux fenêtres partagent une même classe ou un même déclencheur, isolez la règle qui choisit la cible. Le résultat attendu est une fermeture immédiate de la fenêtre visible, suivie d’un retour utilisable à la page.
Vérifier le focus, le voile et le défilement après fermeture
Dans la fenêtre ouverte, le focus doit arriver sur un élément approprié du dialogue. Pour un message court, la fermeture ou une première action peut convenir. Pour un contenu long et structuré, le titre peut constituer un meilleur point d’entrée si le composant le rend sélectionnable par son script. La personne peut alors lire avant de choisir une action. Vérifiez que la fenêtre possède un nom, idéalement à partir d’un titre visible.
Avec Tab et Majuscule avec Tab, observez l’ordre des commandes. Sur un dialogue modal, le parcours doit rester dans les contrôles de la fenêtre jusqu’à sa fermeture. Si le focus atteint des liens sous le voile, identifiez le composant qui gère la modalité. Une étiquette ARIA peut décrire le dialogue aux outils d’assistance. Elle ne rend pas à elle seule le fond inactif et ne gère pas le clavier. Corrigez le comportement du composant à la source.
Après fermeture, le focus revient normalement au déclencheur. Si ce bouton a disparu à la suite d’une action, prévoyez un élément logique dans la page, par exemple le titre de la zone mise à jour. Un dialogue fermé qui conserve le focus sur un bouton invisible donne l’impression que le clavier a cessé de fonctionner. Vérifiez le cadre de focus et la prochaine commande atteinte.
Si le cadre a disparu mais que la page reste bloquée, demandez au mainteneur de vérifier le voile restant, le verrouillage du défilement et l’état qui rend le fond inactif. Comparez une fermeture par le bouton et une fermeture avec Échap. Un composant peut nettoyer son état sur un chemin et oublier de le faire sur l’autre. Conservez le contrôle qui bloque le fond pendant l’ouverture et rétablissez la page au moment de fermer.
Remplacer la fenêtre par un parcours dans la page si la tâche le permet
Quand la fenêtre contient seulement des horaires, des conditions de visite ou un texte d’aide, examinez si cette information peut rester accessible dans la page. Créez une section avec un titre explicite et placez-y le texte. Le lien d’origine peut mener à cette section ou à une page dédiée. Le lecteur garde alors l’adresse, le contexte et ses outils habituels de navigation. Vérifiez que la destination est visible et identifiable après activation du lien.
Dans l’éditeur de blocs, vous pouvez insérer Détails pour une information complémentaire qui doit pouvoir être dépliée sur place. Donnez un libellé clair au résumé et ajoutez le texte dans le bloc. Vérifiez au clavier l’ouverture, la fermeture et le passage à la section suivante. Une information indispensable à l’action principale mérite d’être directement visible. Pour un document important ou un formulaire long, une page dédiée peut offrir un espace mieux adapté.
Avant de supprimer le déclencheur d’une fenêtre, inventoriez ses usages. Une même fenêtre peut s’ouvrir depuis un bouton dans un article et depuis un lien d’en-tête. Remplacez chaque accès prévu par la nouvelle destination sur la copie. Vérifiez si l’ancienne ouverture automatique est encore active. Si la fenêtre est utilisée sur d’autres pages avec un autre but, retirez uniquement la condition ou le déclencheur qui concerne votre parcours.
Pour revenir en arrière, conservez la version initiale du bouton et les conditions de la fenêtre. Remettez d’abord le chemin vers le contenu, puis vérifiez la disparition du lien provisoire si nécessaire. Sur une fenêtre partagée, testez un autre usage après le changement. Vous pourrez ainsi corriger le parcours ciblé tout en préservant les autres pages.
Préparer un dialogue natif pour une fenêtre maintenue par le thème
Si le composant appartient à votre thème et doit rester modal, demandez au responsable du thème de vérifier l’élément HTML dialog et son ouverture avec showModal. Le navigateur place alors le dialogue au-dessus de la page et rend l’arrière-plan inactif pour cette ouverture. Ajouter simplement l’attribut open ne produit pas le même comportement modal. Gardez un titre qui nomme la fenêtre et une commande de sortie explicite. Dans l’exemple, la fermeture reçoit le focus au départ pour un texte court. Le script décrit ensuite le parcours clavier pour les deux commandes de cet exemple.
Placez ce balisage dans le modèle de la copie à l’emplacement maintenu par le site. Les deux liens « Voir les horaires » doivent mener à la même page d’horaires déjà accessible. Copiez l’adresse publique de cette page dans les deux attributs href. Le chemin /horaires/ est un exemple à remplacer, notamment sur un site en sous-dossier. Le fragment de code est conçu pour ouvrir une autre page. Si les horaires sont dans une section de la page actuelle, utilisez le lien direct décrit dans le parcours sans fenêtre. Le lien extérieur reste accessible sans JavaScript ou sur un navigateur qui ne prend pas en charge showModal. Le bouton d’ouverture est masqué au départ et devient utilisable une fois le script prêt. Choisissez des identifiants uniques si le modèle se répète.
Le formulaire method dialog ci-dessous ne contient qu’un bouton Fermer. Il ferme le dialogue localement. Placez le composant en dehors de tout formulaire existant pour éviter une imbrication. Si la fenêtre doit contenir un vrai formulaire, séparez sa commande de fermeture et faites examiner la gestion des données saisies. Pour revenir à l’état antérieur, restaurez le balisage précédent dans la même zone avec son script, puis vérifiez le lien normal.
<a id="lien-horaires" href="/horaires/">Voir les horaires</a>
<button id="ouvrir-horaires" type="button" hidden>
Ouvrir le rappel des horaires
</button>
<dialog id="dialogue-horaires" aria-labelledby="titre-horaires">
<h2 id="titre-horaires">Horaires de visite</h2>
<p><a href="/horaires/">Voir les horaires</a> pour connaître les créneaux disponibles.</p>
<form method="dialog">
<button type="submit" autofocus>Fermer</button>
</form>
</dialog>Relier le bouton au dialogue dans le script du thème
Le responsable peut placer le fragment suivant dans le fichier JavaScript du composant et charger ce fichier sur les seules pages concernées. Dans WordPress, utilisez le mécanisme de chargement de scripts du thème, par exemple wp_enqueue_script, et exécutez ce code après la présence du balisage. Le fragment convient au cas d’un seul déclencheur et d’un seul dialogue qui contient exactement le lien et le bouton Fermer. Si vous ajoutez des commandes, adaptez la gestion des deux extrémités de l’ordre de tabulation. Un modèle répété ou une fenêtre alimentée après le chargement demande une adaptation de la sélection et du moment d’initialisation.
Le déclencheur reste caché tant que le composant est incomplet. Si le dialogue a été retiré de la page entretemps, le déclencheur disparaît et le focus revient au lien. Le dialogue natif conserve la fermeture par Échap et son mécanisme de retour au focus précédent. Le script prépare ce retour en plaçant le focus sur le déclencheur avant l’ouverture. Si la fermeture laisse le focus sur le corps de la page, le script le replace sur le déclencheur. Si le déclencheur a disparu, le lien de repli reçoit le focus. Tab boucle entre les deux commandes du dialogue. Vérifiez séparément le défilement, qui dépend aussi de la mise en page et des styles du thème.
Sur la copie, vérifiez que le fichier est bien chargé et que la console ne signale pas d’erreur sur le dialogue. Si la Console indique qu’une ressource JavaScript en HTTP a été bloquée sur une page HTTPS, corrigez son URL avant de modifier le gestionnaire de fermeture. Essayez d’abord le lien sans le script. Activez ensuite le script et contrôlez le bouton, l’arrivée dans le dialogue, la fermeture et le retour du focus. Pour revenir à l’état précédent, restaurez le fichier et son chargement de façon cohérente avec le balisage. Une page encore servie avec l’ancien script peut demander une comparaison de versions avant d’autres changements.
const lienHoraires = document.getElementById('lien-horaires');
const ouvrirHoraires = document.getElementById('ouvrir-horaires');
const dialogueHoraires = document.getElementById('dialogue-horaires');
const lienDialogue = dialogueHoraires?.querySelector('a[href]');
const fermerHoraires = dialogueHoraires?.querySelector('button[type="submit"]');
if (
lienHoraires && ouvrirHoraires && lienDialogue && fermerHoraires &&
typeof dialogueHoraires.showModal === 'function'
) {
ouvrirHoraires.addEventListener('click', () => {
if (!dialogueHoraires.isConnected) {
ouvrirHoraires.hidden = true;
if (lienHoraires.isConnected) lienHoraires.focus();
return;
}
if (dialogueHoraires.open) return;
ouvrirHoraires.focus();
dialogueHoraires.showModal();
});
dialogueHoraires.addEventListener('keydown', event => {
if (event.key !== 'Tab') return;
if (event.shiftKey && document.activeElement === lienDialogue) {
event.preventDefault();
fermerHoraires.focus();
} else if (!event.shiftKey && document.activeElement === fermerHoraires) {
event.preventDefault();
lienDialogue.focus();
}
});
dialogueHoraires.addEventListener('close', () => {
if (dialogueHoraires.open) return;
if (!ouvrirHoraires.isConnected || ouvrirHoraires.hidden) {
if (lienHoraires.isConnected) lienHoraires.focus();
} else if (document.activeElement === document.body) {
ouvrirHoraires.focus();
}
});
ouvrirHoraires.hidden = false;
}Vérifier le parcours complet et préparer le retour arrière
Sur la copie, testez d’abord avec un clavier physique. Rejoignez le déclencheur par Tab, ouvrez la fenêtre, puis parcourez ses commandes dans les deux sens. Fermez avec le bouton, recommencez avec Échap, puis rouvrez la fenêtre. Vérifiez à chaque fois le retour au déclencheur, la possibilité de continuer à naviguer et le défilement de la page. Rouvrez la fenêtre et vérifiez que son lien mène à la page publique des horaires. Comparez cette adresse à celle du lien de repli, puis ouvrez aussi ce lien sans JavaScript. Si le déclencheur est retiré pendant l’ouverture, vérifiez le retour du focus au lien restant. Si la fermeture conserve un message ou des données en cours, vérifiez le comportement attendu avant de déclarer la correction prête.
Sur téléphone, comparez un écran en portrait et un écran plus large. Testez le défilement de la fenêtre quand son contenu est long. Agrandissez aussi le texte ou la page et vérifiez que la fermeture reste atteignable. Si un champ ouvre le clavier virtuel, contrôlez l’accès au champ et aux commandes du dialogue. Avec un lecteur d’écran disponible, vérifiez l’annonce du titre, l’ordre des commandes et le retour à la page. Ces vérifications portent sur le parcours essayé. Elles ne constituent pas une évaluation complète du site.
Contrôlez une autre adresse si le modèle ou l’extension est partagé. Utilisez une session visiteur neuve si la fenêtre dépend d’une fréquence d’affichage. Comparez le résultat avec la capture de départ. Si le test échoue, restaurez la condition, le modèle ou le fichier concerné à partir des valeurs relevées. Vérifiez la navigation après ce retour et laissez la solution de repli accessible lorsque la fenêtre bloque l’action principale.
Notez le composant, le changement exact et les parcours contrôlés. Le prochain changement de thème ou de script pourra être comparé au même scénario d’ouverture, de fermeture et de retour à la page.
