Une image dit mille mots, mais pas vraiment

Zoey adore naviguer sur Internet. Ils aiment se perdre dans la toile interconnectée pleine d’informations, démêler des morceaux de connaissance qui méritent un signet. Mais ils n’aiment pas parcourir de grandes quantités de texte. Ils préfèrent les images. Beaucoup d’images. Ils parcourent les photos de leur béguin sur Facebook avant même d’envisager de lire sa biographie. Leur soif de mèmes et de visualisations est inégalée sur cette planète et leurs histoires Instagram le reflètent. Ils sont juste, vous savez, fortement connectés à leur nature d’apprenants visuels. Et il n’y a rien de mal à ça.

Mais il n’y a pas que Zoey dans ce monde. Il y a Trung-Anh, il y a Sewon, il y a Nayon, il y a Venkatesh, il y a Zeqiu, il y a Dinko, il y a Sade, il y a Ivan, et il y a Mohammed. Selon l’OMS, au moins 29 % (2,2 milliards) de la population mondiale (7,7 milliards) souffre d’une forme ou d’une autre de déficience visuelle, ce qui représente au moins 3 personnes dans la liste susmentionnée. Hmm, donc, umm … maintenant que nous savons que 29% de la population pourrait ne pas être en mesure de voir le contenu visuel, que faisons-nous ? Est-ce que nous nous en tenons à l’interprétation littérale de la citation de Fred Barnard « Une image vaut mille mots » ? J’ose dire que non. Pas toujours.

Une question souvent curieuse à poser est : comment les personnes déficientes visuelles utilisent-elles un ordinateur ? Tout d’abord, je pense qu’il est important de comprendre qu’avoir une déficience visuelle n’est pas synonyme d’être aveugle. Ainsi, si vous voyez quelqu’un utiliser une canne blanche, il serait faux de penser qu’il est complètement aveugle. Lorsqu’il s’agit d’utiliser un ordinateur, en fonction de son niveau de vision, la personne peut utiliser des lecteurs d’écran pour lire le contenu de son écran. Parmi les lecteurs d’écran populaires, citons JAWS, NVDA (gratuit et open-source) et VoiceOver (intégré dans les appareils d’Apple).

L’état du monde

Génial ! Donc, nous avons un moyen pour les utilisateurs de lecteurs d’écran d’interagir avec leurs ordinateurs ou leurs appareils mobiles. Mais comment un lecteur d’écran peut-il lire les photos de son béguin ? Ou les mèmes ? Ou les graphiques/visualisations ? Une réponse possible ici est que nous devrions faire des progrès médicaux pour guérir leur vue ou n’importe quoi dans le sens où ils auraient un assistant personnel/ami/famille qui pourrait leur expliquer ce qu’il y a sur l’écran. Une autre réponse possible consiste à construire un monde où il leur est possible de le faire eux-mêmes. Si votre réponse était plus proche de la première, alors vous devez clairement vous éduquer et vous familiariser avec les concepts du modèle social du handicap.

Images

Mettons l’accent sur les images. Pour que le lecteur d’écran soit capable de lire une image, il doit savoir de quoi il s’agit et ensuite le présenter à l’utilisateur de manière significative. Prenons par exemple l’image d’une famille jouant avec ses jumeaux Huskies (Allez les Huskies !). En tant qu’utilisateur non lecteur d’écran, il est facile de comprendre ce qui se passe dans l’image – non seulement ce qui se passe au premier plan, mais aussi à l’arrière-plan. Par exemple, Jialin, l’un des membres de la famille, porte un T-shirt sur lequel il est écrit « 100% humain ». Le lecteur d’écran peut-il extraire entièrement la scène ? Pour ce faire, les lecteurs d’écran comptent sur les développeurs ou les auteurs de contenu pour fournir un texte alternatif pour les images à l’aide de l’attribut « alt », qui a été présenté au public en 1995 dans le cadre de HTML 2.0 (si vous ne savez pas ce qu’est un attribut alt ou quelle importance il revêt, cet article fournit une excellente vue d’ensemble de l’attribut alt). L’élément HTML img ressemble alors à :

<img src="image1.jpg" alt="This is an image of two Huskies" />

Donc, le lecteur d’écran lira maintenant « Image, Ceci est une image de deux Huskies ».

Laisser l’attribut alt vide ou fournir un texte sans signification tel que « Image 1 », comme vous pouvez l’imaginer, n’est pas très utile. Même avec le texte alternatif « C’est une image de deux Huskies », l’information relayée est loin d’être proche de ce que le lecteur d’écran serait capable d’extraire, comme le texte sur le T-shirt de Jialin. En outre, le lecteur d’écran annonce déjà le contenu comme une « image » ou un « graphique », ce qui fait de « Ceci est une image » un texte redondant. Tout cela dans l’hypothèse où l’image est postée par un utilisateur qui a accès au code pour entrer le texte alternatif.

Mais qu’en est-il des endroits comme les plateformes de médias sociaux où les images sont téléchargées par des utilisateurs qui n’ont pas du tout accès au code. Facebook, en 2016, plus de dix ans après son lancement, a commencé à employer l’intelligence artificielle pour ajouter un texte alternatif généré automatiquement aux images, et a permis aux utilisateurs de modifier ce texte, si nécessaire. Instagram a suivi et mis en place cette fonctionnalité l’année dernière, 8 ans après son lancement. Les questions, cependant, restent les mêmes – Quelle quantité d’informations un texte alternatif doit-il fournir ? Une description de base, de niveau supérieur, est-elle suffisante ? En décidant de ce qu’il faut présenter aux utilisateurs de lecteurs d’écran, supposons-nous et généralisons-nous ce que les utilisateurs de lecteurs d’écran recherchent dans l’image ? Si une image vaut mille mots, alors, métaphoriquement, un texte alternatif ne devrait-il pas être un millier de mots ?

GIFs et images animées

Leo a un fort jeu de mèmes et est un expert pour trouver un GIF de chat pour toute occasion. Étant donné qu’un GIF est créé en combinant plusieurs images différentes de manière à ce que le résultat final donne l’impression d’une vidéo très courte, sommes-nous confrontés aux mêmes problèmes que ceux rencontrés avec les images ? Pire. En tant que développeur, vous pouvez certainement (et devriez) ajouter un texte alternatif similaire à ce que nous faisons pour les images (le GIF est un fichier image, après tout). Mais sur les plateformes de médias sociaux, selon la façon dont un GIF est traité par la plateforme, il est soit rendu à l’aide d’un élément img sans attribut alt, soit à l’aide d’un élément video. Un élément video ne prend pas du tout en charge l’attribut alt.

Donc, tous ces widgets GIF que nous avons utilisés pour poster des mèmes animés sur Facebook et Instagram, ceux qui nous rendent cool et tout, sont inaccessibles pour les utilisateurs de lecteurs d’écran. Ici, notre objectif n’est pas d’empêcher Leo de poster des GIF (parce que, miaou) mais de faire en sorte que ce type de contenu soit apprécié par tout le monde et pas seulement par un sous-ensemble de la population.

Graphes et visualisations

Tout cela et nous n’avons même pas encore abordé les « choses difficiles ». Voici les graphiques et les visualisations interactives. Yisu et Xuhai sont des nerds de la visualisation et, comme tout chercheur, ils sont convaincus que les graphiques et les visualisations sont extrêmement précieux ; il est rare qu’un article universitaire ne contienne pas au moins un graphique ou une visualisation. Un graphique transmet des connaissances très visuelles et est généralement intégré dans une page Web en utilisant l’une des trois principales techniques suivantes :

1. comme une image pour le contenu statique.
2. comme un élément HTML canvas ou des graphiques SVG (mise à niveau d’une image sur divers aspects) pour le contenu statique.
3. et/ou comme une visualisation interactive utilisant des bibliothèques JavaScript (qui emploient généralement HTML canvas ou SVG comme mécanisme sous-jacent) pour servir un contenu dynamique et permettre aux utilisateurs d’interagir avec le graphique.

Lorsqu’il est utilisé comme une image, les mêmes considérations s’appliquent que celles que nous avons discutées ci-dessus avec la complexité supplémentaire de présenter des informations scientifiques. Que doit dire le texte alternatif ? Devrait-il donner un aperçu du graphique ? Doit-il inclure des statistiques telles que la moyenne, la médiane, le mode, etc. Et si oui, lesquelles ? Quelle quantité d’informations est insuffisante et quelle quantité est excessive ? Ce sont des questions difficiles.

Un canvas HTML est lui-même exposé comme un bitmap, et sans la mise en œuvre d’un contenu de repli approprié pose plusieurs défis d’accessibilité. Cependant, il existe plusieurs techniques pour les rendre accessibles et ne sont qu’à une recherche Google. Mais bien sûr, il incombe aux développeurs de connaître ces techniques et de les mettre en œuvre dans leur travail – ce que j’ai vu s’améliorer avec le temps, mais je ne m’y fierais pas. Au contraire, le SVG est encouragé pour les graphiques accessibles car, selon les spécifications du W3C, les éléments enfants sont disponibles pour l’API d’accessibilité. Cependant, la prise en charge par les navigateurs est encore en cours de développement et un graphique SVG entièrement accessible nécessite des efforts et au moins une connaissance fondamentale de SVG, ce qui, encore une fois, est une responsabilité qui repose sur les épaules des développeurs.

Pour répondre à certaines de ces préoccupations, j’ai créé evoGraphs – un plugin jQuery pour créer des graphiques accessibles, qui a remporté le prix du délégué pour le défi de l’accessibilité lors de la conférence W4A en 2015. Certes, il ne répond pas à toutes les questions soulignées concernant la complexité de la présentation des informations scientifiques. Par conséquent, les graphiques accessibles sont un domaine d’exploration actif pour moi et d’autres chercheurs.

En tant que visualisation interactive (comme ChartJS, Google Charts et D3), la représentation des informations mises à jour dynamiquement est délicate. La plupart des utilisateurs de lecteurs d’écran n’utilisent pas de dispositif de pointage (comme la Souris, le Trackpad, etc.) et la plupart des interactions se limitent uniquement à ou sont plus pratiquement utilisables lorsqu’un survol de certains éléments est déclenché. Sans de telles interactions, l’objectif des visualisations interactives pour un utilisateur de lecteur d’écran devient nébuleux et on peut soutenir que, sans une prise en compte adéquate, la compréhension du contenu peut devenir plus perplexe.

En outre, de nombreuses bibliothèques graphiques modernes permettent une modification dynamique du contenu. La transmission de l’information aux lecteurs d’écran, lorsque le contenu est modifié, peut être gérée en utilisant correctement les attributs ARIA, qui sont devenus une recommandation du W3C en 2014 et sont honnêtement une aubaine. Mais, comme pour les SVG, la prise en charge stable par les navigateurs de toutes les fonctionnalités ARIA est encore en cours, surtout lorsqu’elles sont utilisées dans les SVG. Une formation appropriée des développeurs est encore nécessaire pour utiliser pleinement ce que ARIA a à offrir.

La voie à suivre

Depuis que Tim Berners-Lee a créé le World Wide Web, jusqu’à aujourd’hui, la technologie a drastiquement augmenté. Malheureusement, on ne peut pas en dire autant de l’accessibilité de ces technologies. Lorsqu’une technologie particulière est rendue accessible aux personnes handicapées, le monde est déjà passé à des technologies plus avancées. Le jeu de rattrapage ne s’arrête donc jamais. Et il ne le sera pas – à moins que l’accessibilité ne devienne la considération fondamentale dans le développement de nouvelles technologies.

Mais tout espoir n’est pas perdu. Nous avons et continuons à faire de grands progrès dans le domaine de l’accessibilité du Web, tant dans la recherche universitaire que dans les produits industriels. Les étudiants et les nouveaux développeurs apprennent les concepts de l’accessibilité et les techniques pour rendre le web plus accessible. Pour l’avenir, j’envisage de prendre du recul et de réfléchir à l’adaptation du logiciel aux besoins des utilisateurs plutôt que d’attendre que les utilisateurs s’adaptent au logiciel. Par exemple, devons-nous continuer à supposer quelles informations un utilisateur de lecteur d’écran voudrait extraire d’une image ou devons-nous construire des outils qui en apprennent davantage sur l’utilisateur et présentent les informations que l’utilisateur préfère appréhender ? Pour moi, l’avenir nous éloigne de la généralisation et nous rapproche de la personnalisation – un World Wide Web qui est vraiment centré sur l’utilisateur.

1. « Déficience visuelle et cécité ». Organisation mondiale de la santé, Organisation mondiale de la santé, https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Consulté le 20 oct. 2019.
2. « La valeur d’une image : D. H. Hepting, Ph.D. » La valeur d’une image | D. H. Hepting, Ph.D., http://www2.cs.uregina.ca/~hepting/projects/pictures-worth.
3. Matériaux HTML 2.0, https://www.w3.org/MarkUp/html-spec.
4. Sharif, Ather, et Babak Forouraghi. « evoGraphs-A jQuery plugin to create web-accessible graphs ». 2018 15e conférence annuelle de l’IEEE sur les communications avec les consommateurs & (CCNC). IEEE, 2018.
5. « Aperçu de la WAI-ARIA. » Initiative pour l’accessibilité du Web (WAI), https://www.w3.org/WAI/standards-guidelines/aria.

.