Catégories
Astuces et Design

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

C’est vrai, l’animation Web peut être accessible! Parfois, il faut juste un petit effort supplémentaire pour s'assurer que c'est le cas. Il y a des choses stratégiques que nous pouvons faire pour nous assurer que nos animations ont un impact positif sur l'accessibilité, comme planifier la façon dont elles contribuent à l'expérience utilisateur globale et à la facilité d'utilisation de notre site. Il existe également des considérations plus tactiques pour s'assurer que les animations de notre site sont accessibles, et c'est là qu'interviennent les directives pour l'accessibilité du contenu Web (WCAG).

Bien que différents contextes puissent affecter les détails de ce que vous devez faire, le WCAG fournit un certain nombre de recommandations pour le contenu animé et les interactions. Celles-ci incluent des directives sur le moment de fournir des commandes de pause et de lecture, des limites pour le clignotement ou le clignotement de l'écran et des conseils sur le moment de fournir des options de mouvement réduites pour les utilisateurs sensibles au mouvement. Si vous ne l'avez pas regardée depuis un certain temps, la spécification a été mise à jour vers la version 2.1 et contient désormais des conseils encore plus utiles sur la façon dont nous pouvons concevoir des animations Web accessibles.

Examinons plus en détail chacune de ces recommandations pour voir comment nous pouvons les appliquer à notre travail sur le Web:

Mettre en pause, arrêter, se cacher

La première des recommandations WCAG qui s'applique spécifiquement à l'animation est Pause, Stop, Hide. Pour celui-ci, le titre donne un assez gros indice sur ce qu'est la recommandation. Il est dit:

Pour toute information mobile, clignotante ou défilante qui (1) démarre automatiquement, (2) dure plus de cinq secondes et (3) est présentée en parallèle avec d'autres contenus, il existe un mécanisme permettant à l'utilisateur de mettre en pause, d'arrêter ou de se cacher à moins que le mouvement, le clignotement ou le défilement ne fasse partie d'une activité où il est essentiel; (…)

La recommandation s'applique spécifiquement au mouvement déclenché par la page Web sans interaction de l'utilisateur, et cela peut sembler quelque chose qui ne s'applique pas au travail d'animation de l'interface utilisateur au début. La plupart des durées que nous pourrions utiliser dans le travail d'animation de l'interface utilisateur sont bien en dessous de ce seuil de cinq secondes individuellement. Mais il existe des modèles courants où cela s'appliquerait. Par exemple: des carrousels ou des diaporamas à progression automatique, des arrière-plans animés ou des illustrations animées. Bien que chaque animation individuelle dans ces modèles puisse être encore très courte, le mouvement global qui est créé se déroule souvent pendant plus de cinq secondes. Cela est particulièrement vrai lorsque ceux-ci sont conçus pour jouer sur une boucle infinie, ce qui est certainement plus long que cinq secondes.

Comment répondre aux critères Pause, Stop, Hide

Si certaines de ces animations sont plus longues, vous devrez ajouter des commandes de mise en pause et de lecture qui permettent aux utilisateurs de contrôler le mouvement et / ou le comportement de lecture automatique. Cependant, la spécification WCAG ne dicte pas à quoi ces contrôles doivent ressembler, vous avez un contrôle de conception complet sur cela.

Un bon exemple de cela dans la pratique est la façon dont la série d'articles «Dark Side of The Grid» gère les exemples d'animations. Chaque figure animée est en boucle indéfiniment une fois qu'elle a commencé. Ils fournissent donc un bouton de lecture / arrêt permettant aux lecteurs de lire l'animation quand ils veulent la voir et de l'arrêter une fois qu'ils ont terminé. D'autres animations plus décoratives ou illustratives de l'article sont lues une fois, puis présentent un bouton pour les rejouer, si les utilisateurs le souhaitent. Le placement et la conception des boutons correspondent également à l'esthétique de la conception générale de l'article, ce qui les rend à la fois fonctionnels et esthétiques.

Les GIF animés sont également à rechercher. Si vous disposez d'un GIF animé en boucle, il vous faudra une sorte de commandes de pause / lecture pour répondre correctement à ces critères. Les deux techniques mentionnées dans cet article sont utiles pour y parvenir.

Il y a quelques exceptions à cette recommandation, comme indiqué par le WCAG. Les chargeurs et les préchargeurs constituent une exception à noter.

Trois clignotements ou sous le seuil

Cette recommandation est probablement celle qui a le plus de recherches derrière elle parce qu'elle découle de l'époque de la diffusion télévisée. La principale raison derrière cette recommandation est que le clignotement important à l'écran est connu pour déclencher des crises.

En bref trois clignotements ou états inférieurs au seuil:

Les pages Web ne contiennent rien qui clignote plus de trois fois par période d'une seconde, ou le flash est en dessous des seuils généraux de flash et de flash rouge.

Comment répondre aux trois clignotements ou aux critères inférieurs au seuil

Le WCAG fournit des détails sur la taille, le rapport et les seuils d'angle de vue sous lesquels le clignotement de l'écran peut être considéré comme sûr. Mais pour la plupart d’entre nous, il est probablement plus facile d’éviter tout ce qui clignote plus de trois fois en une seconde. Je ne pense pas que de nombreux designers UX aient décidé de flasher l'écran de manière excessive, mais cela peut arriver. Par exemple, une conception adaptée à une sorte de jeu vidéo ou à une ambiance glitch peut impliquer un clignotement d'écran qui se produit plus fréquemment que trois fois par seconde.

Cet article du Huffington Post, illustré ci-dessous, est un exemple spécifique de conception qui comprend une quantité importante de clignotements. C’est un article très stylisé sur la façon dont les milléniaux sont plus difficiles à gérer des choses comme l’emploi et l’épargne-retraite que les générations précédentes. Son design de jeu vidéo 8 bits glitch est très en phase avec le thème de l'article. Du point de vue du design, c'est un excellent choix pour le sujet et il est bien exécuté. Mais il y a des moments, comme vous pouvez le voir sur les images fixes image par image ci-dessous, où la couleur du texte clignote plus de trois fois par seconde.

Cette quantité de clignotement pourrait être problématique pour les personnes souffrant d'épilepsie ou d'autres réactions physiques déclenchées par le clignotement. À leur honneur, le Huffington Post a également fourni une version texte de l'article pour toute personne sensible au clignotement, comme le mentionne Eileen dans cet article, ainsi qu'un avertissement préalable du danger potentiel de clignotement.

En général, éviter les effets qui nécessitent des clignotements fréquents est le moyen le plus sûr de répondre à ces critères. Cependant, si vous ne pouvez pas éviter de faire clignoter des animations dans votre projet, le WCAG fournit des instructions détaillées sur les seuils de sécurité pour le clignotement de l’écran. De plus, fournir un avertissement avancé du contenu clignotant et une version alternative du contenu sans l'effet clignotant (comme l'exemple ci-dessus) est également une bonne chose à faire.

Les niveaux A, AA et AAA du WCAG

Le WCAG a plusieurs niveaux de critères et de conformité, c'est pourquoi chaque recommandation a une notation du niveau auquel elle appartient. La conformité de niveau A est le niveau minimum de conformité. Le niveau AA est le niveau de conformité intermédiaire et indique que les critères des niveaux A et AA ont été respectés. Le niveau AAA est le plus haut niveau de conformité et nécessite de satisfaire aux critères des niveaux A, AA et AAA. En règle générale, les directives du niveau AAA nécessitent un effort supplémentaire pour se conformer. (Si vous souhaitez en savoir plus sur ces niveaux et sur ce qu'ils contiennent en dehors des recommandations relatives à l'animation que nous couvrons ici, j'ai dressé une liste de ressources utiles à la fin de cet article.)

En général, la plupart des gens visent une conformité de niveau AA lorsqu'ils disent créer un site Web accessible. C'est également le niveau que vous pourriez voir demandé dans une demande de propositions ou un résumé de projet. Les deux dernières lignes directrices dont nous avons discuté relèvent des critères de niveau AA et doivent donc être respectées pour revendiquer la conformité au niveau AA. La ligne directrice suivante, cependant, fait partie des critères de niveau AAA. Même si cela dépasse le niveau de conformité habituel, il s'agit d'une recommandation très utile à prendre en compte si votre projet repose de manière significative sur l'animation. Je recommande fortement de l'implémenter dans votre travail.

Animation des interactions

Cette directive couvre un type d'animation différent des deux précédents. Alors que les deux premiers sont généralement appliqués à l’animation lancée par la page Web elle-même, celle-ci s’applique à l’animation déclenchée par l’interaction de l’utilisateur. Plus précisément, il déclare:

L'animation de mouvement déclenchée par l'interaction peut être désactivée, sauf si l'animation est essentielle à la fonctionnalité ou aux informations véhiculées.

À première lecture, le terme «animation de mouvement» peut prêter à confusion puisque nous utilisons généralement les termes «mouvement» et «animation» de manière interchangeable. Cela peut sembler trop spécifique au début, mais il est logique de le préciser dans ce cas. Le WCAG définit l'animation de mouvement comme une animation utilisée pour «créer l'illusion du mouvement» et spécifie que «l'animation de mouvement n'inclut pas les changements de couleur, de flou ou d'opacité».

Essentiellement, le terme animation de mouvement est utilisé pour indiquer que certains types d'animation créent une impression de mouvement, tandis que d'autres ne le font pas. Ce sont ces animations qui créent une impression de mouvement qui concerne cette directive. Il est important de garder cette distinction à l'esprit lorsque vous discutez de l'animation et de l'accessibilité pour vous assurer de concentrer vos efforts de manière efficace. Si nous devions exprimer cette distinction dans un diagramme de Venn très semblable à un globe oculaire, cela ressemblerait à ceci:

Un grand cercle violet clair avec le mot Animation dessus en blanc avec un petit cercle blanc contenu au bas du grand cercle avec le mot Motion dessus en noir.

Au cours des dernières années, nous avons réalisé que certains types de mouvements à l’écran, même dans le cadre d’une interface, peuvent provoquer des maladies physiques chez les personnes sensibles au mouvement. C'est pourquoi nous pourrions envisager de créer un mode de mouvement réduit dans notre travail. J'ai écrit plus sur les types d'effets de mouvement les plus susceptibles de se déclencher dans cet article, et cet article du blog WebKit couvre quelques exemples en détail.

Comment répondre à l'animation à partir des critères d'interactions

Le WCAG suggère d'éviter les animations inutiles, de fournir aux utilisateurs un contrôle pour désactiver tout mouvement non essentiel ou de profiter du paramètre de mouvement réduit dans les systèmes d'exploitation et les agents utilisateurs. Examinons chacun de ces éléments un peu plus en détail. Il y a différentes choses que nous pouvons faire pour éviter d'exposer les gens à une animation qui pourrait les rendre étourdis, nauséeux ou pire.

Évitez les animations inutiles

Le contexte et les attentes jouent également un rôle ici. La quantité de mouvement que vous pourriez raisonnablement vous attendre à rencontrer sur un site Web pour un film ou un jeu vidéo est très différente de ce que vous pourriez raisonnablement vous attendre à rencontrer sur un site gouvernemental ou sur le site d’une entreprise de construction. Les mêmes effets étonnants qui pourraient s'intégrer parfaitement sur le site d'un jeu vidéo sembleraient inutiles ou déplacés sur, par exemple, un site Web gouvernemental. Tenez compte du contexte et des attentes qui s'appliquent à votre site et si la quantité d'animation que vous utilisez dans votre conception correspond à ce contexte.

Fournir aux utilisateurs un moyen de désactiver les animations de mouvement potentiellement problématiques

Si vous avez du mouvement dans votre produit qui pourrait être un déclencheur pour les personnes sensibles au mouvement, fournir un moyen pour les utilisateurs d'éviter ces animations de déclenchement est la chose responsable à faire. Sur la base de la définition des WCAG, tout effet pouvant être considéré comme une animation de mouvement doit en être un qui inclut une version réduite.

Les effets de parallaxe en sont un bon exemple. Celles-ci sont universellement problématiques pour les personnes ayant une sensibilité au mouvement basée sur mes propres recherches, mais c'est aussi toujours une technique très populaire. S'il ne serait pas réaliste d'appeler à la fin de tous les effets de parallaxe, la mise en œuvre responsable de la parallaxe nécessite de donner à vos utilisateurs un certain niveau de contrôle pour désactiver ce mouvement de déclenchement.

En règle générale, cela est interprété comme incluant une bascule, un paramètre ou une préférence permettant aux utilisateurs d'indiquer leur préférence pour un mouvement réduit, et fournissant des versions réduites de ces effets d'animation de mouvement lorsqu'ils sont activés. Le site Netlify 1 Million Devs est un exemple de basculement de mouvement en action, et le site officiel d'Animal Crossing en a un aussi.

Affichage d'une capture d'écran de la page Web de Netlify Thanks a Million. Une bascule pour désactiver l'animation est située dans le coin supérieur gauche de la page, au-dessus du contenu, qui est placé sur un fond vert menthe.
Profitez de la fonction de réduction de mouvement

Les sites ou les applications qui ne reposent pas beaucoup sur de grandes quantités de mouvement peuvent constater qu'une bascule personnalisée n'est pas la bonne stratégie pour eux et utilisent à la place le prefers-reduced-motion requête média seule. Cela vous permet de fournir une version réduite de contenu hautement animé lorsque cette préférence est présente globalement via le système d'exploitation de l'utilisateur. Il s’agit également d’un paramètre qu’ils peuvent définir au même endroit et affecter une variété de contenus qu’ils rencontrent. Cela en fait un excellent outil que nous pouvons utiliser pour détecter et répondre au besoin d’un utilisateur de réduire les mouvements.

J'ai écrit sur l'utilisation prefers-reduced-motion en détail sur Smashing Magazine, et il a également été couvert par d'autres articles sur ce site. En bref, cela nous permet d'accéder aux préférences de mouvement au niveau du système d'exploitation de quelqu'un via une requête multimédia. Nous pouvons y accéder en CSS ou JavaScript et utiliser la valeur renvoyée pour offrir une expérience de mouvement réduite à ceux qui le souhaitent. Par exemple, nous pourrions le faire pour créer une variation de mouvement réduite d'une animation CSS rebondissante:

/* A constant bouncing motion effect applied to the title */
h2 {
  animation: bouncing 1.5s linear infinite alternate;
}

/* Replace it with a safer effect when prefers-reduced-motion returns true */
@media (prefers-reduced-motion: reduce) {
  h2 {
    animation: fade 0.5s ease-in both;
  }
}

Certains sites choisissent d'utiliser à la fois une bascule personnalisée et des préférences de mouvement réduites ensemble. Si vous accédez au site avec un mouvement réduit demandé dans les paramètres de votre système d'exploitation, vous obtenez automatiquement le mode de mouvement réduit. Cette approche à deux volets est une excellente stratégie pour les sites avec de grandes quantités de mouvement. Marcy Sutton couvre les bases de la mise en place de cette approche dans son cours egghead.io, ainsi que dans cette démo CodePen.

Utilisez ces directives pour votre prochain projet d'animation

Voilà, tout ce que les WCAG disent sur l'animation est expliqué en un seul endroit. J'espère que cet article vous aidera à rendre votre travail d'animation Web accessible en toute confiance. Parfois, cela demande un petit effort supplémentaire, mais cet effort supplémentaire en vaut la peine quand cela signifie que vous avez augmenté le nombre de personnes qui peuvent interagir de manière significative avec votre site.

Cet article s'est concentré sur les recommandations spécifiques à l'animation, mais l'animation n'est pas le seul endroit de notre travail où les considérations d'accessibilité peuvent avoir un impact important. Il existe d'excellentes ressources sur l'accessibilité qui couvrent une vue plus holistique de l'accessibilité. L'un de mes préférés est le livre Accessibilité pour tous par Lara Kalbag. Des sites comme WebAIM et le projet A11y sont d'excellents sites à découvrir pour une multitude de ressources. Si vous effectuez une grande partie de votre travail d’animation avec SVG, l’article sur l’accessibilité SVG de Heather est également une bonne ressource. Je vous recommande vivement de consulter ces ressources si vous ne l'avez pas déjà fait.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *