Observer ce qui démarre avant votre première action
Ouvrez la page dans une fenêtre de visite, avec une taille d’écran où le problème a été signalé. Laissez-la d’abord se charger sans cliquer. Notez ce qui bouge, ce qui se met à jouer, ce qui change au défilement et si un son est audible. Un titre qui glisse une seule fois, un carrousel qui avance toutes les quatre secondes et une vidéo muette qui tourne derrière le texte demandent des réglages différents. Relevez le temps écoulé avant le démarrage et pendant lequel l’effet reste visible. Pour un carrousel, mesurez le temps total de rotation et pas seulement la durée de chaque diapositive.
Vérifiez ensuite la même page en naviguant au clavier. Identifiez le premier lien ou bouton que vous voulez atteindre. Observez si la zone change de contenu avant que vous puissiez l’utiliser, si le texte reste lisible et si une commande permet d’arrêter le mouvement. Sur mobile, cherchez aussi une commande accessible sans survol. Un navigateur peut refuser une lecture automatique sonore selon ses règles et l’historique de la session. Une visite silencieuse chez une personne ne suffit donc pas à établir que la vidéo attend partout une action.
Le W3C distingue plusieurs situations. Pour un contenu en mouvement qui démarre seul, dure plus de cinq secondes et est présenté avec d’autres contenus, prévoyez un moyen de le mettre en pause, de l’arrêter ou de le masquer, sauf si le mouvement est essentiel. Pour des informations qui se renouvellent seules à côté d’autres contenus, le contrôle peut aussi porter sur la fréquence et le seuil de cinq secondes ne s’applique pas. Le son qui se lance seul et dure plus de trois secondes relève d’un autre contrôle. L’utilisateur doit pouvoir l’arrêter, le mettre en pause ou régler son volume indépendamment du volume général du système. Si le son ou l’animation n’apporte rien au parcours, vous pouvez aussi le supprimer à la source.
Retrouver le bloc, le modèle ou le script qui produit l’effet
Dans l’éditeur WordPress, ouvrez la liste des blocs et repérez la zone observée. Cliquez sur le bloc le plus proche du mouvement. Si le cadre sélectionné contient seulement un titre ou un bouton, remontez jusqu’à son parent. Une vidéo de fond appartient parfois à un bloc Bannière, tandis qu’une vidéo que l’on regarde est souvent un bloc Vidéo. Un média hébergé ailleurs peut se trouver dans une intégration. Un carrousel ou un effet d’entrée peut venir d’un bloc fourni par le thème ou une extension. Relevez son nom, le chemin dans la liste des blocs et l’emplacement du réglage.
Si le même effet se répète sur plusieurs pages, comparez une page touchée et une page qui devrait rester calme. Cherchez un modèle partagé, une composition synchronisée ou une règle de style commune. Vérifiez que vous ouvrez bien l’élément qui produit le rendu public. Si la page n’a aucun bloc correspondant alors que l’effet apparaît sous le même en-tête partout, le modèle ou un script partagé mérite d’être examiné. Pour une modification sur la copie, dupliquez la page ou travaillez sur le plus petit modèle représentatif avant d’étendre la correction.
Faites un relevé initial avec le réglage qui déclenche l’effet, le contenu visible et une page témoin. Un dessin animé intégré dans une image reste animé quand on désactive le réglage de transition du bloc. À l’inverse, une image fixe peut se déplacer si son conteneur reçoit une animation CSS ou si un script modifie sa position. Si l’effet survient seulement à l’entrée dans la zone visible ou lors du passage du pointeur, notez précisément ce déclencheur pour le reproduire.
Approche 1. Régler la lecture et les médias de fond
Avec les droits d’édition de la page, sélectionnez le bloc Vidéo et ouvrez Réglages dans la colonne latérale. Désactivez Lecture automatique et gardez Commandes de lecture activé. Désactivez aussi Boucle si la fin du clip doit marquer une pause ou laisser le temps de lire la suite. Dans les réglages du bloc, ouvrez Image d’affiche et choisissez une image. Vérifiez que le titre du média ou le texte voisin annonce ce que la vidéo montre. L’image d’affiche présente le média avant la lecture. Les commandes viennent du lecteur.
Sur la copie, rechargez dans une nouvelle fenêtre et attendez quelques secondes. La vidéo doit rester en attente. Lancez-la avec son bouton, mettez-la en pause et reprenez la lecture. Utilisez ensuite les commandes au clavier et sur écran tactile. Vérifiez aussi les sous-titres ou le texte équivalent prévu pour le contenu, surtout si la vidéo explique une procédure. Si le son est utile, contrôlez que le lecteur permet de l’ajuster. Une vidéo muette peut encore bouger derrière du texte, et un réglage de volume ne règle pas cet effet visuel.
Si le média est intégré depuis une autre plateforme, cherchez le réglage de lecture dans le composant qui crée le lecteur. Le bloc WordPress peut seulement héberger un cadre et la configuration du lecteur lui-même peut être définie ailleurs. Demandez au responsable de ce composant de confirmer le réglage correspondant. Si vous maintenez directement le HTML d’un lecteur natif, retirez l’attribut booléen autoplay pour désactiver le démarrage automatique. Un attribut écrit autoplay="false" reste présent et peut autoriser le démarrage. Sur une intégration distante, vérifiez le résultat après chargement complet du lecteur.
Remplacer un fond animé en gardant le texte et les boutons
Lorsqu’une vidéo sert uniquement de fond à un bloc Bannière, essayez une image fixe dans la copie. Sélectionnez le bloc parent et utilisez le remplacement du média dans sa barre d’outils si l’interface le propose. Gardez les blocs intérieurs, la superposition et le point de cadrage sous contrôle. Si vous devez reconstruire la bannière, relevez d’abord les titres et les destinations des boutons. Sur téléphone, vérifiez que la partie importante de l’image reste visible et que les boutons se détachent du fond. Une image différente peut demander d’ajuster l’opacité de la superposition.
Si la vidéo contient une démonstration utile, déplacez-la vers un bloc Vidéo identifiable à proximité et laissez le bandeau principal au repos. Le visiteur peut lire le titre puis choisir de regarder la démonstration. Si l’ancien fichier était une image animée, utilisez une image réellement fixe ou un média consultable sur demande. Pour une image qui porte une information essentielle, conservez cette information dans un texte accessible ou dans un élément qui la transmet aussi lorsque le fond ne se charge pas.
Vérifiez le modèle public après changement. Si une vidéo continue de se charger, le fichier peut rester attaché à un autre bloc, à une variante mobile ou à un script du thème. Comparez les deux tailles d’écran et demandez au mainteneur de vérifier les ressources chargées dans la page. Masquer visuellement un lecteur avec une règle CSS ne retire pas son déclencheur. Pour arrêter un média ou un téléchargement automatique, intervenez sur le composant qui le lance ou remplacez le média à la source.
Approche 2. Corriger la rotation ou le déclencheur du composant
Pour un carrousel de cartes, cherchez d’abord un réglage d’avance automatique ou de rotation. Essayez le mode manuel sur la copie en conservant les commandes précédent et suivant. Donnez aux boutons des noms compréhensibles et vérifiez que la carte visible reste utilisable. Si une rotation est maintenue, proposez une commande de pause et de reprise accessible dès le début du parcours dans le carrousel. Prévoyez l’arrêt lorsque le focus entre dans la zone et lors du survol à la souris. Une pause qui dépend du survol laisse sans moyen équivalent les personnes qui utilisent le clavier ou un écran tactile.
Après une pause demandée par le visiteur ou un arrêt déclenché par l’entrée du focus, vérifiez que la rotation attend une action explicite pour repartir. Sur la copie, entrez dans le carrousel avec Tab, attendez plus d’un intervalle et vérifiez que la carte reste en place. Avancez d’une carte, suivez son premier lien au clavier, puis quittez la zone et confirmez que la rotation reste arrêtée. Testez ensuite le bouton de reprise. Si le composant ne permet pas d’obtenir ces résultats, le mode manuel ou une liste de cartes fixes peut conserver l’accès aux mêmes informations. Vérifiez les liens et leur ordre après ce remplacement.
Pour un effet lié au défilement, examinez si le titre, le texte et les commandes sont déjà visibles quand l’animation est supprimée. Certains blocs rendent un élément transparent jusqu’à l’arrivée dans la fenêtre, puis utilisent un script pour le montrer. Retirer seulement le déplacement peut laisser ce texte invisible. Désactivez l’effet dans les réglages du composant quand cette possibilité existe, ou faites ajuster par le mainteneur l’état statique et le déclenchement ensemble. Dans les deux cas, le texte doit être disponible dès que le visiteur arrive dans la zone.
Approche 3. Respecter la préférence de réduction des animations
Lorsque le thème ajoute un mouvement décoratif en CSS, le mainteneur peut le réduire pour les personnes qui ont demandé moins de mouvement dans leur système. L’exemple vise une seule section qui possède la classe agenda-animation et un titre qui possède la classe agenda-animation__titre. Les classes doivent correspondre aux éléments réels. Dans l’éditeur, la classe supplémentaire d’un bloc se saisit sans point initial. Avec un thème de blocs, vous pouvez essayer la règle dans Apparence > Éditeur > Styles, puis CSS additionnel dans le menu à trois points. Ce réglage s’applique à tout le site, tandis que le sélecteur limite l’effet aux deux classes. Si le site gère ses styles dans des fichiers, ajoutez la règle à la feuille du thème enfant ou du composant qui est chargée sur la page de recette. Gardez une copie du CSS précédent.
La règle convient à un titre qui est déjà visible et pour lequel transform sert uniquement à l’effet décoratif. Si la transformation règle aussi l’alignement du titre, retirez uniquement le mouvement et conservez la position attendue. Si une autre déclaration masque le titre, adaptez son état visible avec le mainteneur. N’appliquez pas la règle à tous les éléments de la page. Les menus, panneaux et autres composants interactifs peuvent s’appuyer sur une transition ou une transformation pour rendre leur état compréhensible.
La préférence de mouvement permet une variante d’affichage. Les contrôles de pause, de son et de lecture volontaire doivent aussi être vérifiés dans le réglage ordinaire du système. Si un script fait avancer un carrousel ou lance une vidéo, les trois déclarations ci-dessous ne commandent pas ce script. Réglez alors le comportement du composant. Testez la préférence normale et la préférence réduite après rechargement, avec la même adresse et le même contenu.
@media (prefers-reduced-motion: reduce) {
.agenda-animation .agenda-animation__titre {
animation: none;
transition: none;
transform: none;
}
}Tester une page calme sans perdre ses fonctions
Sur une copie autorisée, préparez une page témoin avec une courte vidéo fictive, une image d’affiche et un bouton vers une autre section. Vérifiez d’abord l’état initial dans une session de visite. Modifiez un seul déclencheur, puis recommencez avec une nouvelle session. Pour la vidéo à la demande, attendez le même temps avant le premier clic, lancez la lecture, mettez-la en pause et reprenez. Pour un carrousel manuel, attendez plusieurs intervalles qui auraient provoqué une rotation, puis utilisez ses commandes. Pour la variante CSS, vérifiez que le titre reste visible et que la navigation atteint le bouton.
Refaites le parcours en affichage étroit, puis au clavier sur un écran large. Pour la variante CSS, vérifiez d’abord l’effet prévu avec le réglage système ordinaire. Activez ensuite la réduction des animations dans les réglages d’accessibilité du système, rechargez et confirmez que le titre reste immobile et visible. Contrôlez que les commandes et les liens restent atteignables et comparez avec une page qui n’utilise pas les classes ciblées. Si la feuille de styles est partagée, cette seconde page sert de témoin. Vérifiez aussi le lecteur, la pause et le réglage sonore avec les deux préférences.
Si l’aperçu est correct mais que la vue visiteur montre encore l’ancien effet, confirmez l’adresse, la version de la page et la feuille de styles ou le média réellement utilisés. Un cache de page ou d’asset peut expliquer cet écart. Faites identifier la couche avant d’appliquer une purge ciblée. Relancez ensuite le même parcours dans les conditions qui rendaient le problème visible.
Revenir au dernier comportement vérifié
Conservez le média de départ, l’état du bloc et les réglages de rotation ou de lecture. Si la correction gêne l’accès à une information, restaurez seulement le composant modifié et rejouez le parcours témoin. Pour un ajustement de style, retirez le bloc CSS ou rétablissez la version précédente de la feuille. Pour une bannière, replacez le média convenu et vérifiez la superposition et les boutons. Pour une composition partagée, comparez au moins deux pages après retour, car le réglage peut concerner plusieurs usages.
Lorsque la lecture manuelle fonctionne et que le texte reste accessible, notez le réglage retenu, le modèle concerné et les conditions d’essai. Ajoutez un contrôle simple pour les futures pages qui reprennent le même composant. Par exemple, le rédacteur peut confirmer que la vidéo attend le clic, que la pause reste disponible et que le premier lien est atteignable au clavier. Conservez aussi le nom des classes ajoutées si un mainteneur intervient dans les styles.
Le résultat utile est une page dont le contenu reste lisible au chargement et dont les médias démarrent selon le choix prévu. Le relevé permet de retrouver rapidement l’origine d’un retour du mouvement, notamment après un changement de modèle, de média ou de réglage du thème.
