Des animations web accessibles reposent sur un principe simple : chacun doit pouvoir comprendre la page et accomplir sa tâche sans dépendre de mouvements décoratifs. Conservez les animations qui expliquent un changement utile, proposez une présentation plus sobre lorsqu’une personne demande à réduire les mouvements et permettez de contrôler les mouvements continus lorsque cela est nécessaire.
Pour une entreprise qui commande un site web, la question pratique est de savoir quoi préciser dans le brief et comment vérifier le résultat livré. Ce guide propose un inventaire des animations, un tableau de décision et une liste de vérifications pour la recette. Vous pouvez les utiliser pour une nouvelle conception ou un site existant, sans devoir trancher vous-même chaque détail technique.
1. Donnez un rôle à chaque élément en mouvement
Commencez par recenser ce qui bouge au cours d’un parcours client habituel. Ouvrez la page d’accueil, lisez la présentation d’un service, dépliez une question et accédez au formulaire de demande. Incluez l’animation d’ouverture, les effets au défilement, les diapositives automatiques, les vidéos d’arrière-plan, les transitions des menus, les indicateurs de chargement et les messages de confirmation. Ne vous limitez pas à la grande zone d’accueil : les petits effets peuvent s’accumuler sur une même page.
Pour chaque élément, décrivez ce que le mouvement apprend au visiteur. L’ouverture d’un panneau peut montrer où se trouvent des informations complémentaires. Un indicateur de progression peut signaler qu’une demande est toujours en cours de traitement. Un objet décoratif en rotation peut renforcer l’identité visuelle, mais il ne doit pas être le seul moyen de découvrir le service ou de trouver le bouton suivant.
Formulez le résultat attendu avant de discuter de la durée ou du style. « Le client voit quelle question est ouverte » laisse à l’équipe de conception la liberté de choisir une solution claire. « Chaque section doit entrer en volant » engage le projet sur un effet avant que son utilité ait été vérifiée. Demandez à l’équipe de présenter une version fixe à côté du concept animé.
Établissez un inventaire succinct des animations
Un inventaire utile indique la page, l’élément, le déclencheur, le rôle, l’éventuelle répétition, le comportement prévu en mode de réduction des mouvements et la personne chargée de la vérification. Ajoutez une colonne pour les preuves : adresse de prévisualisation, enregistrement ou note de test. Vous disposez ainsi d’un petit document de recette à reprendre lorsqu’une nouvelle campagne ajoute un carrousel ou une vidéo.
2. Définissez le comportement de la version plus sobre
MDN présente prefers-reduced-motion comme un moyen pour un site web de détecter une préférence pour la réduction des mouvements non essentiels. C’est un signal auquel la mise en œuvre doit répondre. Activer ce réglage sur l’appareil ne remanie pas automatiquement toutes les animations d’un site.
Demandez qu’un comportement soit défini pour chaque effet. Un zoom de grande amplitude peut devenir un changement d’état immédiat ; un arrière-plan décoratif animé peut devenir une image fixe. Une réponse dépliée peut apparaître sans traverser l’écran. N’acceptez pas « nous ralentissons tout » comme unique plan : même ralenti, un mouvement de grande amplitude peut rester superflu.
| Élément et rôle | Présentation plus sobre à envisager | Question de recette |
|---|---|---|
| Une animation décorative dans la zone d’accueil installe le style visuel | Utiliser une composition fixe conçue à cet effet | Le visiteur peut-il immédiatement lire l’offre et utiliser le lien principal ? |
| Des sections apparaissent pendant le défilement | Afficher les contenus sans grands déplacements ni attente | Chaque section reste-t-elle disponible lors d’un défilement rapide et de la navigation au clavier ? |
| Un menu dévoile les choix de navigation | Ouvrir et fermer sur place, avec un état clairement identifiable | Le visiteur peut-il atteindre les liens et revenir à la commande d’ouverture ? |
| Un carrousel présente plusieurs offres | Prévoir des commandes explicites et un état fixe ou en pause convenu à l’avance | Toutes les offres sont-elles accessibles sans devoir devancer les changements automatiques ? |
| Un formulaire indique le traitement et la fin de la demande | Conserver un texte d’état compréhensible et une confirmation stable | Le visiteur sait-il s’il doit attendre, réessayer ou poursuivre ? |
Ce tableau est un exemple de préparation, pas la preuve qu’un site donné respecte une norme d’accessibilité. Remplacez ses lignes par les composants réels de votre projet. Consignez ce qui se passe au premier chargement et ce qui doit se produire si la préférence change alors que la page est ouverte. Demandez à l’équipe de développement de signaler les composants tiers dont le comportement nécessite une vérification distincte.
3. Distinguez préférences, commandes et critères d’accessibilité
La prise en charge de la réduction des mouvements et un bouton de pause répondent à des problèmes liés, mais différents. Une préférence peut sélectionner une présentation plus sobre dès le départ. Une commande visible peut permettre d’arrêter un mouvement continu pendant la lecture. Le brief doit préciser les deux lorsqu’ils sont pertinents, sans considérer l’un ou l’autre comme un substitut universel.
Le critère 2.3.3 des WCAG 2.2, « Animation résultant d’interactions », est de niveau AAA. Il concerne la possibilité de désactiver les animations de mouvement déclenchées par une interaction, sauf si elles sont essentielles à la fonctionnalité ou à l’information. Ne présentez pas ce critère précis comme une exigence de niveau AA.
Le critère 2.2.2, « Mettre en pause, arrêter, masquer », est de niveau A. Sa disposition relative aux contenus en mouvement s’applique lorsque le mouvement démarre automatiquement, dure plus de cinq secondes et apparaît à côté d’autres contenus, avec une exception lorsqu’il est essentiel à une activité. Il comprend aussi une disposition distincte pour les informations mises à jour automatiquement, sans cette exception des cinq secondes. Ces distinctions comptent lorsqu’on examine un carrousel, un bandeau défilant ou un arrière-plan animé.
Demandez au prestataire selon quels critères et quel niveau de conformité le projet sera évalué, qui réalisera cette évaluation et quelles preuves seront fournies. Réussir une liste de vérifications sur la réduction des mouvements ne démontre pas une conformité complète aux WCAG. L’examen des animations fait partie d’une évaluation plus large qui couvre aussi la structure, les modes de saisie, le contraste, les alternatives et d’autres exigences.
Vérifiez que les commandes donnent réellement le contrôle
Une commande de pause doit être repérable, compréhensible et utilisable avec les modes de saisie convenus. Vérifiez ce qui se passe lorsque le focus passe ailleurs ou qu’un autre composant s’ouvre. Un carrousel qui redémarre dès que le visiteur quitte son bouton de pause ne permet pas une véritable pause de lecture. Convenez du maintien ou non d’une préférence ou d’un choix de pause au fil de la navigation, puis testez le comportement retenu.
4. Préservez la tâche lorsque le mouvement change
La version plus sobre doit rester une page entièrement fonctionnelle. Supprimer une animation ne doit pas laisser un texte transparent, une navigation hors de la zone visible ou un bouton en attente de la fin d’une animation. Demandez à l’équipe de développement de montrer que les contenus atteignent leur état final utilisable même lorsque la séquence décorative ne s’exécute pas.
Suivez le focus clavier dans les menus, les boîtes de dialogue et les sections dépliables. Voyez-vous où vous vous trouvez ? L’ouverture d’un composant vous place-t-elle dans un contexte pertinent, et sa fermeture vous ramène-t-elle à l’endroit attendu ? Évitez une conception où le mouvement visuel est le seul indice d’un changement. Des libellés clairs, des états de sélection identifiables et une mise en page stable doivent aussi transmettre le sens.
Accordez une attention particulière aux formulaires. Une forme qui tourne ne suffit pas à expliquer si une demande est en cours de traitement, a échoué ou a abouti. Demandez des messages d’état clairs et une communication adaptée des mises à jour importantes aux technologies d’assistance. Si l’équipe supprime l’indicateur tournant dans la version plus sobre, l’état sous-jacent et l’action suivante doivent rester accessibles.
Pour les contenus qui bougent avec le défilement, comparez un défilement lent, un défilement rapide et la navigation au clavier. Vérifiez si des titres, des prix ou des commandes disparaissent avant de pouvoir être lus. Une information essentielle ne doit pas exiger un geste minuté avec précision. Si un récit visuel nécessite une séquence, convenez d’un moyen accessible d’obtenir la même information sans effectuer cette séquence.
Exemple fictif de vérification d’une page de service
Imaginez un cabinet de conseil dont le site comporte une animation décorative dans la zone d’accueil et un formulaire de demande. Dans la version plus sobre, l’animation devient une image fixe, les détails des services apparaissent immédiatement et le formulaire conserve son message de traitement et sa confirmation. La personne chargée de la recette vérifie le même parcours de demande dans les deux versions. Cet exemple illustre une méthode de recette ; il ne s’agit ni d’un résultat client observé ni d’une promesse d’augmentation des conversions.
5. Vérifiez les pages terminées dans les deux modes
Demandez la version exacte de prévisualisation prévue pour la mise en ligne. Examinez-la avec le réglage habituel des animations, puis avec la préférence de réduction des mouvements activée sur l’appareil ou dans le navigateur. Un fichier de conception peut exprimer une intention, mais il ne prouve pas la réaction de la page réalisée. Notez le navigateur, l’appareil, le réglage et l’adresse de la page pour chaque observation.
Utilisez un petit ensemble de tâches reproductibles : lire l’offre, ouvrir la navigation, déplier des détails complémentaires et accéder au formulaire de demande. Dans un environnement de test, incluez les états de réussite et d’erreur du formulaire convenus à l’avance. N’envoyez pas de véritables demandes clients uniquement pour tester une animation. L’équipe projet doit fournir un moyen sûr d’examiner ces états sans déclencher de messages opérationnels.
Vérifiez sur téléphone et sur ordinateur, en utilisant un clavier ainsi que le tactile ou un dispositif de pointage selon le cas. Agrandissez le texte pour voir si des éléments animés en surimpression masquent le contenu. Si un effet dépend du survol, demandez comment la même information reste disponible au toucher. Incluez les outils de réservation intégrés, les vidéos et les autres composants externes qui font partie du parcours client.
Décrivez les défauts à partir d’exemples observables. « Lorsque la réduction des mouvements est activée, l’ouverture du menu mobile laisse le lien de contact invisible » permet d’agir. « L’animation semble mal fonctionner » demande davantage d’explications. Ajoutez les étapes, le comportement attendu et un court enregistrement lorsque le problème concerne le mouvement. Après une correction, répétez la tâche concernée sur la prévisualisation corrigée.
6. Demandez des preuves à la hauteur des affirmations
Conservez l’inventaire des animations avec les résultats. Chaque ligne doit préciser ce qui a été testé, ce qui a réussi, ce qui reste non résolu et qui est responsable de l’action suivante. Demandez les pages et les états effectivement couverts, plutôt qu’un badge portant la mention « accessible ». Un rapport automatisé peut aider à repérer certains problèmes, tandis que la vérification manuelle des tâches révèle des comportements qui exigent une observation directe.
La documentation Lighthouse de Chrome explique que les vérifications manuelles d’accessibilité ne contribuent pas au score d’accessibilité. Un score de 100 ne démontre donc pas que toutes les exigences d’accessibilité ont été évaluées. Demandez les constats manuels en plus du rapport automatisé, notamment pour les commandes d’animation et le parcours de demande complet.
Examinez les performances séparément. Demandez quelle version, quel profil d’appareil et quelles conditions ont produit un résultat de laboratoire, et si les interactions importantes ont été vérifiées après le chargement initial. Un effet décoratif fluide sur l’ordinateur de l’équipe de conception doit tout de même être évalué sur les appareils cibles convenus. Une préférence de réduction des mouvements n’est pas un indicateur fiable d’un appareil plus lent, et la présentation habituelle nécessite elle aussi une vérification adaptée de ses performances.
Restez précis dans les affirmations lors de la livraison. « Ces cinq composants ont été testés avec la réduction des mouvements activée dans ces navigateurs » constitue une preuve utile. « Entièrement accessible parce que les animations sont désactivées » n’est pas une conclusion étayée par cette liste de vérifications. Si une évaluation plus large de l’accessibilité fait partie du projet, consignez séparément son périmètre et les problèmes encore ouverts.
7. Intégrez les animations au brief et à la livraison
Avant d’accepter les travaux, formalisez ces décisions par écrit. Elles rendent les préférences visuelles vérifiables et aident les futurs contributeurs à éviter de réintroduire un problème non résolu.
- Rôle : chaque composant en mouvement a une fonction définie et un responsable de contenu.
- Alternative : le comportement en mode de réduction des mouvements est défini, mis en œuvre et vérifié sur les pages réelles.
- Contrôle : les mouvements continus et les mises à jour automatiques disposent des commandes et du comportement convenus.
- Continuité : les contenus, le focus clavier, les messages d’état et la tâche principale du client restent utilisables.
- Preuves : les notes de vérification précisent la version, les environnements, les résultats et les problèmes non résolus.
- Maintenance : une personne sait comment vérifier les nouvelles vidéos, les contenus intégrés et les composants de campagne après la mise en ligne.
Joignez votre inventaire, vos pages de référence et votre parcours client prioritaire à votre demande de projet. Notre guide du brief de projet web aide à organiser le périmètre global, et la liste de vérifications pour une refonte de site aide à décider de ce qu’il faut conserver et tester à nouveau sur un site existant.
L’offre actuelle de création de site de Digital Studio démarre à EUR 2 190 et comprend jusqu’à cinq pages responsives, les bases du SEO, un formulaire de contact et la mise en ligne sur votre domaine. Consultez les services et le périmètre actuels, puis décrivez vos exigences d’animation et d’accessibilité dans le brief du site web. Convenez explicitement de toute évaluation spécialisée et de tout travail supplémentaire ; ne supposez pas qu’un prix forfaitaire garantit une certification particulière en matière d’accessibilité.
