Images et alternatives textuelles
Rôle de l’image, alt pertinent, décoration, descriptions détaillées.
Chapitres
Transcription
Texte intégral de la narration de l’épisode.
Situations du quotidien
Toutes les images ne se valent pas. Une photo qui porte l’information d’un article, une icône purement décorative, un graphique complexe : trois intentions, trois traitements. La thématique Images du RGAA formalise ces cas pour que l’information reste accessible, sans noyer le lecteur d’écran sous du bruit.
Images et alternatives
Dans le RGAA, les images se jugent d’abord par leur rôle. Informative : il faut une alternative textuelle pertinente. Décorative : elle doit être ignorée par les technologies d’assistance. Complexe : parfois une description détaillée s’ajoute. L’erreur la plus fréquente, c’est de traiter toutes les images pareil.
Informative
Pour une image informative, pose-toi la question : que perd-on si on ne la voit pas ? L’alternative doit porter ce message. « image1.jpg » ou « photo de personne » n’aident souvent pas. Un bon alt dépend du contexte : la même image n’a pas le même texte dans une galerie et dans un article d’actualité. Sur le rendu, regarde les deux pastilles. À gauche, l’alternative reprend le nom du fichier : image un point j p g. À droite, elle porte le message : une équipe en atelier accessibilité. C’est exactement ce que le lecteur d’écran pourra transmettre, et ce que le code doit rendre explicite. En HTML, l’intention se voit. Sans alt, l’image n’a pas d’alternative. Avec un alt qui porte l’info, le contenu reste accessible. Avec un alt vide, tu indiques une image décorative à ignorer. Pour un SVG informatif, on s’assure aussi d’un rôle image et d’un nom accessible. Ce n’est pas de la magie : c’est explicite. Les images décoratives ne doivent pas polluer la restitution. Un filet, une vague SVG, une photo d’ambiance sans information : mieux vaut un alt vide, ou parfois une image de fond CSS. Un long alt sur une image purement déco fatigue inutilement. Le critère 1.2 vise exactement cette discipline. Les graphiques, cartes et schémas sont un cran au-dessus. Un alt court peut dire ce que c’est. La description détaillée, elle, porte les tendances ou les données clés. Elle peut être à côté, dans une page liée, ou référencée dans la page. L’objectif n’est pas de décrire chaque pixel : c’est de transmettre l’information utile.
Checklist
Pour chaque image, enchaîne ces questions. Quel est son rôle ? Si elle informe, l’alternative est-elle pertinente ici ? Si elle décore, est-elle bien ignorée ? Si elle est complexe, faut-il une description détaillée ? Cette grille évite le pilote automatique « mettre un alt partout pareil ».
À retenir
À retenir. Le rôle de l’image dicte le traitement. Un alt pertinent n’est pas le nom du fichier. La décoration se tait. Le complexe s’explique. Prochain épisode : les formulaires, labels et messages d’erreur.
CTA
Passe une page en revue image par image. Classe, réécris, vérifie les SVG. Pour analyser un site, rendez-vous sur rgaa-checker.com.
Approfondir dans le guide
Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.
Passer à l’action
La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.