Comment intégrer des Graphics Interchange Format (GIF) accessibles ?

Ce que j’ai fait :

• lire l’article Concilier design et accessibilité(lien externe) de Marie Guillaumet
• lire l’article Accessibility and motion(lien externe) de Sheri Byrne-Haber
• lire les recommandations How to make accessible animated images(lien externe) de la British Broadcasting Corporation (BBC)

Ce que j’ai appris

GIF, GIF everywhere

Les GIF sont un élément incontournable du web : ils fleurissent sur les réseaux sociaux ou les articles de blog, dans certains cas ils constituent même le contenu principal du site (qui ne connaît pas Les Joies du code(lien externe), illustrant le quotidien des développeurs et développeuses ?). On les trouve aussi dans les logiciels de messagerie instantanée comme Slack ou WhatsApp. Bref, vous avez forcément déjà dû en croiser.

Il s’agit d’un moyen d’expression à part entière, permettant d’émettre un avis, d’exprimer un sentiment ou de renforcer un propos grâce à une image en rapport avec le sujet évoqué. Ces images sont généralement décalées pour susciter l’amusement, tirées de films, séries, émissions populaires ou vidéos amateures, voire même d’archives historiques, comme l’explique Le Monde dans son article Bienvenue dans l’ère du GIF historique(lien externe).

Sur le plan technique, il s’agit d’un format d’image numérique permettant de stocker plusieurs images dans un fichier afin de créer des diaporamas ou des animations, généralement en boucle.

Impacts sur les utilisateurs et utilisatrices

Les GIF animés peuvent poser plusieurs problèmes d’accessibilité :

• il s’agit de contenus graphiques auxquels les internautes mal-voyants ou aveugles n’ont pas accès.

• il s’agit de contenus en mouvement ou clignotants, ce qui peut poser un sérieux problème pour les personnes souffrant de troubles de l’attention, d’épilepsie ou même d’anxiété. Il peut en effet être très difficile de se concentrer sur le contenu d’un article, par exemple lorsque des animations se jouent au même moment en boucle, quelques lignes au-dessus. En 2012, Twitter choisissait d’ailleurs de ne plus autoriser les images de profil au format GIF animé, arguant qu’ils détournent l’attention des utilisateurs, qui ne se focalisent plus les tweets (voir à ce sujet l’article Twitter : fini les avatars animés(lien externe))

Recommandations d’accessibilité

Plusieurs critères du Référentiel Général d’Amélioration de l’Accessibilité (RGAA) donnent des directives sur la manière d’intégrer des GIF pour les rendre accessibles :

• Critère 1.1 : Chaque image porteuse d’information a-t-elle une alternative textuelle ?

• Critère 13.8 : Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?

  • la durée du mouvement doit être inférieure ou égale à 5 secondes ;
  • ou alors l’utilisateur doit pouvoir arrêter et relancer le mouvement ;
  • ou alors l’utilisateur doit pouvoir afficher et masquer le contenu en mouvement ;
  • ou alors l’utilisateur doit pouvoir afficher la totalité de l’information sans le mouvement.

Il s’agit donc de :

• fournir un alternative textuelle pour les GIF porteurs d’information (grâce à l’attribut alt notamment, comme nous l’avons vu dans les précédents articles)

• fournir un moyen pour l’internaute de contrôler l’animation

Si l’animation du GIF est inférieure ou égale à 5 secondes, il n’est pas nécessaire de contrôler l’animation car elle est jugée suffisamment courte pour ne pas perturber l’internaute. En revanche, que le GIF ait une fonction informative ou purement décorative, si son animation est supérieure à 5 secondes, des mécanismes de contrôle doivent être mis en place afin de mettre en pause, masquer ou bien le remplacer par une alternative statique.

Plusieurs solutions sont donc possibles :

• dans le cas de GIF décoratifs, il est possible de mettre en place un seul et unique bouton, idéalement au début de la page et du code source, permettant d’arrêter toutes les animations d’un seul coup. Giphy par exemple, sur son site(lien externe), met à disposition des boutons “pause” et “lecture” permettant de stopper les animations en cours. Ces boutons ne sont malheureusement pas situés au début du code source et n’interrompent pas l’animation de l’image principale.

• dans le cas où un ou plusieurs GIF animés porteurs de sens seraient présents sur la page, il faut plutôt prévoir un contrôle individuel pour chacun d’entre eux. Twitter propose ainsi un bouton permettant de contrôler les contenus postés en mouvement (GIFS, vidéos). Il faut pour cela désactiver la lecture automatique dans les préférences de contenu. Les GIF ne démarrent donc pas automatiquement et l’internaute a la possibilité de les lancer ou de les mettre en pause.

Sachez qu’en tant qu’utilisateurs ou utilisatrices, il vous est également possible d’installler des extensions sur vos navigateurs permettant d’activer ou désactiver les images animées, à l’image de (lien externe)Toogle Animated Gif sur Firefox. Bien sûr, ça ne dispense absolument pas les développeurs et développeuses de mettre à disposition des moyens de contrôle natifs directement sur le site.

Enfin, la question peut être la plus importante à se poser est “Est-il nécessaire de recourir à l’utilisation de GIF ?”. Dans le cas de rédaction d’articles, leur apportent-ils une réelle plus-value ? Ou bien s’agit-il avant tout d’un effet de mode ?