Animation Web accessible: le WCAG sur l'animation expliquée

La création d'animations Web accessibles est réalisable avec une planification et une exécution réfléchies. Les choix de conception stratégique, en se concentrant sur l'expérience utilisateur (UX) et la facilité d'utilisation, sont cruciaux. Les directives d'accessibilité du contenu Web (WCAG) fournissent des conseils tactiques pour les animations accessibles. Bien que les détails de mise en œuvre varient selon le contexte, WCAG offre des recommandations sur les contrôles de pause / play, les limitations clignotantes et les options de mouvement réduites. La spécification (version 2.1) fournit des informations mises à jour et précieuses pour la conception d'animations Web accessibles.

Examinons les recommandations clés de WCAG:

Pause, arrêt, cacher

Cette directive conseille que le démarrage automatique de déménager, de clignoter ou de faire défiler le contenu durant plus de cinq secondes, présenté aux côtés d'autres contenus, doit offrir un mécanisme pour faire une pause, l'arrêter ou le cacher. Des exceptions existent lorsqu'un tel mouvement est essentiel à une activité. Cela s'applique à des situations telles que des carrousels auto-avancés, des arrière-plans animés ou des illustrations en boucle, où le mouvement cumulatif dépasse cinq secondes.

Implémentation de pause, d'arrêt, de cachette

Pour des animations plus longues, incorporez des contrôles de pause / jeu. WCAG ne dicte pas la conception du contrôle; La liberté créative est autorisée. Les exemples incluent les boutons play / stop pour les animations en boucle ou les boutons de relecture pour les animations à un jeu, intégrés de manière transparente dans la conception. Les GIF animés en boucle nécessitent également de tels contrôles. Les chargeurs et les préloaders sont des exceptions à cette directive.

Trois flashs ou moins le seuil

Cette recommandation aborde les risques de saisie du clignotement de l'écran. La directive indique: les pages Web ne doivent rien contenir de clignotant plus de trois fois par seconde, ou dépassant les seuils flash et flash rouge spécifiés.

Rencontre le seuil des trois flashs

Éviter de clignoter dépassant trois fois par seconde est l'approche la plus sûre. Alors que les choix stylistiques peuvent incorporer le clignotement (par exemple, une esthétique du jeu rétro), dépasser cette limite présente des risques d'accessibilité. S'il est inévitable, fournissez un avertissement avancé et une autre version non flashing. WCAG fournit des seuils clignotants sûrs détaillés.

Niveaux de conformité WCAG (A, AA, AAA)

WCAG définit les niveaux de conformité: A (minimum), AA (intermédiaire, nécessitant une conformité A et AA) et AAA (le plus élevé, nécessitant une conformité A, AA et AAA). Le niveau AA est généralement ciblé pour l'accessibilité du site Web. Les directives "Pause, Stop, Hide" et "Three Flashes" tombent sous AA.

Animation des interactions

Cette directive se concentre sur l'animation déclenchée par l'interaction de l'utilisateur, indiquant: L'animation de mouvement déclenchée par l'interaction doit être désactivée à moins d'être essentielle à la fonctionnalité ou aux informations transmis. "L'animation de mouvement" fait spécifiquement référence aux animations créant l'illusion de mouvement, à l'exclusion des changements de couleur, de flou ou d'opacité.

Implémentation d'options de mouvement réduites

Pour traiter les sensibilités de mouvement, considérez:

• Éviter l'animation inutile: évaluer le contexte et la pertinence de l'animation.
• Fournir des contrôles utilisateur: offrez des bascules ou des paramètres pour désactiver le mouvement non essentiel.
• Tirer parti prefers-reduced-motion : utilisez cette requête multimédia pour détecter et répondre aux préférences de mouvement réduites au niveau du système d'exploitation de l'utilisateur, offrant des versions alternatives et moins intensives d'animations. Cela peut être implémenté dans CSS ou JavaScript.

Utilisation prefers-reduced-motion dans CSS:

 / * Animation rebondissante * /
H2 {
  Animation: rebondissant 1,5S linéaire infinie alternative;
}

/ * Alternative de mouvement réduit * /
@Media (préfert-réduisant le mouvement: réduire) {
  H2 {
    Animation: Fade 0.5S Factive dans les deux;
  }
}

La combinaison de bascules personnalisées et prefers-reduced-motion fournit une solution robuste pour les sites avec une animation étendue.

Conclusion

En adhérant à ces directives WCAG, vous pouvez créer des animations Web accessibles, garantissant qu'un public plus large peut interagir de manière significative avec votre site Web. N'oubliez pas que l'accessibilité s'étend au-delà de l'animation; Explorez des ressources supplémentaires pour une approche holistique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!