Certains visiteurs sont tellement distraits par le clignotement, le défilement ou le mouvement de certains éléments d’une page web qu’ils ne peuvent comprendre ou lire l’information qui s’y trouve.
Cela peut se produire chez les personnes faiblement alphabétisées ou ayant des difficultés de lecture, des incapacités intellectuelles, ainsi que chez les personnes présentant un trouble déficitaire de l’attention (TDA).
Toutes les animations et tous les mouvements qui démarrent automatiquement, qui durent plus de 5 secondes et qui sont affichés simultanément sur la page avec un autre contenu (texte par exemple), doivent pouvoir être mis en pause, arrêtés ou masqués par le visiteur.
Comment appliquez-vous cela ?
Les vidéos, les présentations automatiques, les animations, les jeux et les annonces déroulantes sont des exemples d’éléments qui bougent, défilent ou clignotent. Vérifiez si le site web contient un ou plusieurs de ces éléments et si une ou plusieurs de ces caractéristiques s'appliquent :
- Le mouvement, le clignotement ou le défilement commence automatiquement.
- Le mouvement, le clignotement ou le défilement dure plus de 5 secondes.
- La partie en mouvement, qui clignote ou défile est affichée en même temps que tout autre contenu.
On ne parle pas d'une animation qui se lance par exemple lors du chargement d'une page, où aucun visiteur ne peut effectuer une action et où il est essentiel que l'animation soit affichée. Sans cette animation, les visiteurs pourraient penser que la page web s'est bloquée ou que des informations sont manquantes.
Si votre site présente des caractéristiques décrites ci-dessus, le visiteur devrait être en mesure de :
- Mettre en pause le mouvement, le clignotement ou le défilement
- Désactiver via un bouton ou un lien toutes les parties en mouvement, qui clignotent ou défilent
- Recharger la page via un bouton ou un lien sans les parties en mouvement, qui clignotent ou défilent
Le bouton ou le lien doivent se trouver aussi haut que possible dans le code source.
Pause et reprise
Lorsque vous optez pour une solution dans laquelle le mouvement, le clignotement ou le défilement d'un élément peut être mis en pause et redémarré, il existe 2 options :
- Lors du redémarrage, continuer à partir du moment où le visiteur s'était arrêté. Cela fonctionne mieux dans les situations où les visiteurs font une pause pour lire un texte et dans les situations où le contenu n'est pas en temps réel et n'a rien à voir avec le statut de quelque chose.
- Lors du redémarrage, passer à l'affichage actuel. Ceci fonctionne mieux pour les informations en temps réel ou sur le statut de quelque chose. Par exemple : un radar météorologique, un ruban avec les cours des actions, une caméra de circulation ou un compte à rebours sur un site de vente aux enchères.
Exemples
- Les lecteurs multimédias pour les vidéos, les clips audio et les images en mouvement doivent disposer d'un bouton de pause.
- Les images GIF animées qui durent plus de 5 secondes doivent cesser de s'animer lorsque le visiteur appuie sur un bouton, par exemple la touche d'échappement (ESC).
- En HTML, vous ne pouvez pas utiliser l'élément <blink> (élément qui permet de faire clignoter le texte).
- En CSS, vous ne pouvez pas utiliser text-decoration: blink.
Pour des rédacteurs
Les rédacteurs doivent veiller à ce que le contenu qu'ils publient ne soit pas en mouvement, ne clignote pas et ne défile pas pendant plus de 5 secondes, ou qu'il existe des options pour mettre en pause ou de désactiver ce contenu.
Pour des développeurs
Si certaines parties répondent aux conditions spécifiées, le développeur doit intégrer des options permettant de mettre en pause ou de désactiver le mouvement, le clignotement ou le défilement.