Créer des images accessibles : les images pour améliorer la compréhension
![]() |
|
Imprimer
|
Envoyer
|
Partager
|
Avertissement : la version originale de ce document est Creating Accessible Images : Images that Enhance Comprehension. Cette traduction en français a été réalisée par Ideose dans le cadre d’un accord entre WebAIM et Ideose.
Note : consulter la page Documents sur l’accessibilité du Web pour obtenir la liste de tous les documents déjà traduits. D’autres ressources sur l’accessibilité du Web sont également listées dans le Portail du numérique accessible.
Sommaire
- Page 1 : Introduction
- Vous êtes sur la Page 2 : Les images pour améliorer la compréhension
- Page 3 : Couleur et contraste
- Page 4 : Les textes en images
- Page 5 : Les graphiques qui provoquent des spasmes
- Page 6 : Créer des bonnes alternatives textuelles (attribut
alt) - Page 7 : Descriptions longues
Introduction
Certaines personnes pensent que les graphiques sont mauvais pour l’accessibilité. La vérité est que les graphiques peuvent être très bénéfiques pour l’accessibilité d’une page Web en fournissant des images, des icônes, des animations ou d’autres éléments visuels qui améliorent la compréhension des personnes voyantes. Nous oublions trop souvent que nous ne développons pas que pour les personnes aveugles. Tous les types de handicap doivent être pris en considération. Les graphiques peuvent être particulièrement utiles aux personnes avec certains handicaps de lecture, d’apprentissage, des troubles de l’attention ou un handicap cognitif.
Illustrations
De nombreux concepts sont transmis de manière plus efficace avec l’ajout d’illustrations. Essayez d’apprendre l’anatomie humaine sur un livre (ou sur un site Web) sans illustrations. A quel point cela serait-il efficace ? Voici un exemple d’une image des muscles de la main.
Vous trouverez probablement difficile d’imaginer qu’une description textuelle pourrait être aussi compréhensible que le texte complété par des illustrations. Les illustrations rendent le contenu plus accessible pour vous. Les illustrations peuvent aussi être particulièrement bénéfiques pour ceux ayant des troubles d’apprentissage ou des troubles de lecture. Les développeurs de cours d’enseignement devraient en particulier envisager le recours à des illustrations afin d’améliorer la compréhension.
Animations
Animations et troubles de l’attention
Les animations sont rarement utilisées pour améliorer l’accessibilité des contenus Web. La plupart du temps, elles sont tout simplement superflues. Les bannières publicitaires utilisent volontairement la qualité des animations pour détourner notre attention du contenu principal du document. Les écoles élémentaires sont connues pour leur utilisation de jolies animations qui n’ont pas d’intérêt particulier sauf à attirer justement l’attention des enfants. De fait, l’attention des enfants est détournée du contenu principal de la page. Par exemple, une animation couramment utilisé est celle d’une boîte à lettres qui s’ouvre et se ferme, comme celle ci-dessous :
La question que vous devez vous poser est de savoir si l’animation est essentielle pour le contenu de la page. Est-ce que le but de la page est d’encourager les personnes à envoyer des courriels ? Peut-être, mais probablement pas. Ce type d’animation est le plus souvent au bas d’une page qui n’a rien à voir avec l’envoi d’un courriel à la personne qui a écrit la page. L’animation est une distraction, même lorsqu’elle est utilisée sur les sites Web pour enfants. Il serait préférable d’éliminer cette distraction.
Les animations pour améliorer la compréhension
Le fait que les graphiques soient le plus souvent utilisés pour détourner l’attention de la personne ne signifie pas qu’elles ne peuvent pas servir à un but plus utile. Les animations permettent d’illustrer les mouvements et les procédures d’une manière qui serait difficile de faire par le texte. Imaginons, par exemple, que vous vouliez apprendre quelques pas de danse écossaise. Une personne peut vous décrire les étapes à suivre dans un texte et peut-être que cela fonctionnera, mais pour la plupart des personnes, il serait plus facile de voir une animation de chacune des étapes, de sorte que l’on pourrait reproduire les mouvements vus dans l’animation. Dans le cas des personnes handicapées avec des difficultés de lecture ou cognitives, les bénéfices des animations sont encore plus importantes.
Juste à titre de comparaison, lisons un texte descriptif d’un pas de danse écossaise, puis regardons une animation. Tout d’abord, le texte descriptif :
Texte descriptif
Placez votre bras droit au-dessus de votre tête, plier le coude d’un angle d’environ 45 degrés. Mettez votre main gauche sur la hanche. Sautillé sur votre pied droit. En même temps que vous sautillez, alterner la position de votre pied gauche tout d’abord devant puis derrière votre jambe droite mais ne laissez pas votre pied gauche toucher le sol. Votre genou gauche doit être plié quand vous faites ce mouvement. Effectuez un total de 4 sauts sur le pied droit, puis inverser la position de vos bras et commencez à sauter sur votre pied gauche pendant que votre jambe droite effectue les actions déjà réalisées par votre jambe gauche. Après 4 sauts sur votre jambe gauche, repassez à la jambe droite et remettez vos bras dans leur position initiale. Cette fois-ci, faites un demi-tour en sautant de manière circulaire et cela en 4 sauts jusqu’à ce que vous soyez de retour à l’endroit où vous avez commencé. Recommencez la procédure.
Dans quelle mesure pensez-vous avoir réussi ce pas de dance ?
Animation
A présent, regardons une animation de ce pas de danse écossaise.
L’animation améliore-t-elle la compréhension du texte descriptif ? Que se serait-il passé si vous aviez eu seulement l’animation, mais pas le texte descriptif ? Que se serait-il passé si vous n’aviez pas pu lire les instructions ? Pour ceux d’entre vous qui ne parlent pas japonais, c’est facile à imaginer puisque le site qui héberge l’animation de la danse écossaise est un site Web japonais. Jetez un oeil à la galerie 1 des styles de danse folkloriques sur ce site japonais. Pensez-vous que vous seriez en mesure d’effectuer ces pas de danse en regardant simplement les animations ? En supposant que vous puissiez voir ces animations, la réponse est peut être « oui ». Il est clair que voir les animations améliorent réellement la compréhension du sujet.
Bien sûr, un texte descriptif sera nécessaire à ceux qui sont aveugles mais nous aborderons ce chapitre un peu plus loin.
Icônes
De nombreux logiciels utilisent des icônes qui remplacent ou accompagnent les textes dans les barres de navigation (pensez à Microsoft Word, par exemple et aux icônes pour ouvrir un fichier
, pour imprimer
, etc.). Voici un ensemble d’icônes pour la barre d’Internet Explorer :
Voici un ensemble d’icônes similaires pour le navigateur Web Opera :
L’utilité d’une icône dépend de :
- si elle est bien dessinée,
- si elle véhicule un concept précis,
- si le public visé comprend le concept véhiculé,
- si elle exprime clairement le concept qu’elle est censée véhiculer.
Les icônes doivent être simples et elles doivent être facilement comprises. Leur valeur artistique est une considération secondaire, mais des icônes peu attrayantes peuvent avoir un effet négatif sur leur compréhension. Par conséquent, choisissez bien votre créateur !
Un des problèmes avec les icônes, c’est qu’elles sont rarement comprises de la même manière par toutes les personnes. La plupart des gens associent une flèche qui pointe à gauche (comme celle ci-dessous) avec la notion de retour ou aller en arrière, mais dans les langues où le texte est écrit de la droite vers la gauche, sa signification est inversée.
En fait, il n’y a pas vraiment d’icônes qui soient comprises dans toutes les langues et cultures. Même au sein d’une même culture et d’une langue, les icônes peuvent être très facilement mal interprétées. Imaginons que quelqu’un décide d’ajouter une icône à une page pour indiquer que des informations dans un paragraphe ne sont que des spéculations et qu’elles ne devraient pas être considérées comme vraies. Pour indiquer cela, un point d’interrogation, comme celui ci-dessous, est placé devant chacune de ces informations dans le paragraphe.
Sauriez-vous immédiatement ce que signifie le point d’interrogation ? Probablement pas. Si le sens de ce point d’interrogation avait été expliqué alors l’icône serait utile. Vous pouvez utiliser les icônes et elles peuvent en fait accroître la compréhension, mais seulement lorsqu’elles sont utilisées à bon escient.
Pour la population en général, les icônes peuvent être utiles, mais elles ne sont pas toujours absolument nécessaire. Certaines personnes avec certains types de handicap cognitif, en revanche, ont besoin des icônes afin de comprendre une information. Certains sites sont développés spécifiquement pour cette population. Même avec des illustrations et des icônes, ces personnes ont souvent besoin de l’assistance d’une autre personne mais elles peuvent comprendre le sens des icônes avec une certaine pratique.
Vidéo et multimédia
Bien que nous ne pourrons pas entrer ici dans les détails de la vidéo et du multimédia, il convient de mentionner que ces éléments peuvent également être utilisés pour améliorer la compréhension, de la même manière que les illustrations, les animations et les icônes. Quand une vidéo est utilisée et que vous fournissez une transcription textuelle (pour les aveugles) et des sous-titres (pour les malentendants), ces éléments participent en fait à l’amélioration de la compréhension avant même de répondre à des besoins d’accessibilité. En ce qui concerne d’autres types de multimédia, tels que Flash, les problèmes d’accessibilité sont un peu plus complexes, mais il est généralement possible de présenter le contenu d’une manière qui soit accessible aux personnes handicapées.
Liens commerciaux
WebAIM est une initiative de :
![]()
Copyright 1999-2009 WebAIM



































S'abonner au blog Ideose