Rendre les images accessibles-Notions de base

Mise en œuvre de l’accessibilité numérique

Menu

Transcription textuelle de la vidéo

Dans le cadre de votre travail, vous utilisez des images, par exemple pour illustrer un article par une photographie ou pour expliquer une idée par un graphique ou un schéma. Mais comment les personnes aveugles peuvent-elles comprendre ? Que devez-vous faire pour leur permettre d’accéder à l’information transmise par ces images ?

Les personnes déficientes visuelles ne peuvent accéder à l’information véhiculée par les images. Un dispositif de substitution doit être prévu pour qu’une information, sous forme textuelle, remplace l’image. Il s’agit d’ajouter un texte derrière l’image, qu’il leur sera alors possible de lire, avec leur outil de restitution (lecteur d’écran ou plage braille).

Ce texte est appelé « alternative textuelle ». Il se substitue à l’image. Ce n’est pas une infobulle qui s’affiche au survol de l’image, ni une légende qui vient compléter l’image, mais bien une alternative, qui sert à remplacer l’image.

Chaque image est dotée d'une alternative textuelle appropriée.

Cela permet aux utilisateurs placés dans des contextes où les images ne sont pas perceptibles (synthèse vocale, navigateur avec images désactivées, plage braille, basse connexion, etc.) d’accéder à l’information véhiculée par les images qu’ils ne peuvent voir.

L’alternative textuelle est par exemple affichée à la place de chaque image, quand la page se charge de façon incomplète (sans les fichiers graphiques, souvent plus lourds), comme vous avez peut-être déjà pu l’observer en naviguant sur un terminal mobile en basse connexion.

Comment ça marche ?

Techniquement, chaque image est dotée d’un attribut HTML « alt » destiné à recevoir ce « texte alternatif ». En l’absence de cet attribut, le lecteur d’écran lit la seule information à sa disposition, en l’occurrence le nom du fichier, faute de mieux, ce qui constitue une nuisance. La présence de l’attribut « alt » est donc obligatoire. Son oubli est une erreur de programmation.

Quelle alternative textuelle ?

Il faut évaluer quelles sont les images qui véhiculent une information, dans le contexte du site, et celles qui ont une valeur purement décorative.

Images décoratives

Certaines images ne sont pas porteuses d’information. C’est le cas des images d’ambiance, qui habillent le site, des éléments graphiques rythmant la page, mais aussi certaines illustrations au sein d’un article qui servent de repère visuel dans la lecture.

Ces images non porteuses d’information sont dites « décoratives ». Elles doivent être définies comme telles afin que les utilisateurs de lecteur d'écran ne soient pas confrontés à des nuisances lors de la restitution.

Dans ce cas, l’alternative doit être laissée vide. Concrètement, l’attribut « alt », obligatoire, est présent, mais vide. Cela donne l’instruction que l’image ne porte pas d’information et peut donc être ignorée par les lecteurs d’écran.

Images porteuses d’information

Le contenu de l'alternative dépend étroitement de la fonction de l'image et du contexte précis dans lequel elle est employée.

Cette alternative doit être courte et concise : idéalement ne pas dépasser 80 caractères.

Dernière chose, l’alternative est en texte brut : elle ne peut contenir ni lien, ni enrichissement typographique.

Images cliquables

Les images cliquables, dites « images-liens », sont avant tout… des liens ! et ne peuvent donc être laissées vides. Leur alternative indiquera la cible du lien plutôt que la description de l'image proprement dite.

Par exemple, ces pictos cliquables représentant les réseaux sociaux nous sont familiers sur les pages web :

Chacun de ces pictos doit avoir une alternative textuelle, qui explicite leur fonction : « Nous suivre sur Facebook », « Nous suivre sur twitter », etc.

L'alternative textuelle d'une image-lien peut contenir d'autres informations que celles permettant de connaître la fonction et la destination du lien.

L'alternative devra donc reprendre les informations véhiculées par l'image ainsi que véhiculer les informations permettant de connaître, la fonction et la destination du lien.

Images complexes

Certaines images, dites « complexes », comme les graphiques, diagrammes, cartographies, etc. véhiculent une information trop importante pour être fournie sous forme d’alternative textuelle.

Voici un exemple d’une image complexe. Il s’agit d’une infographie :

Dans ce cas, l’alternative s’en tiendra à un titre qui résume l’essentiel une « description détaillée » devra accompagner l’image.

Cette description détaillée doit être affichée dans la même page ou être accessible à partir du contexte de l’image, par exemple sous la forme d’un lien vers une autre page, dédiée à la description détaillée.

< Précédent | Suivant >