Images

TL;DR

Les images ne devraient jamais être la seule façon de consulter une information ou accéder à une fonctionnalité pertinente pour l'utilisateur.
Les images incluant un texte ou un diagramme doivent respecter les normes d'accessibilité quant au choix des couleurs, au contraste et à la lisibilité de l'information.
Les images ne devraient contenir du texte qu'en dernier recours ou dans un contexte publicitaire.
Les images sont générées depuis Picto, la base de données visuelles de Radio-Canada.

Anatomie

Élément

Description et interactions

Image

Les ratios et les tailles d'images sont normées dans le but de limiter le nombre de requêtes faites au service d'images et ainsi limiter les frais d'opérations : 1:1, 2:3, 4:3, 16:9, 17:6 et sur mesure (taille et ratio personnalisés)

Texte alternatif

Son objectif est de décrire l’action ou le visuel de l’image.
Il est essentiel pour informer les personnes qui utilisent un lecteur d'écran (logiciel qui récite le contenu d’un site web aux personnes ayant des limitations visuelles) pour naviguer.
Il s’affiche quand une image ne se télécharge pas.
Il est référencé. Les mots-clés pertinents permettent aux moteurs de recherche d’indexer les contenus et ainsi augmenter leur portée.
Le texte alternatif n’est pas une copie de la légende. Le lecteur d’écran lira la légende et le texte alternatif l'un à la suite de l’autre.
Il ne s’agit pas de trouver une autre façon de dire ce qui est écrit dans la légende, mais plutôt de décrire l’image à une personne qui ne peut pas la voir. N’hésitez pas à être précis.

À faire :

Décrire l’action de l’image
Nommer la personne sur la photo
Utiliser des mots-clés (SEO)
Rédiger un texte d’environ 125 caractères
Ponctuer le texte avec un point final

À ne pas faire :

Identifier la personne à l’aide des expressions « un homme » ou « une femme »
Préciser la nationalité de la personne ou la couleur de sa peau
Décrire l’aspect physique et les vêtements de la personne
Copier-coller la légende
Commencer le texte avec l’expression « on voit », « image de » ou autres dérivés

Spécificités des images informatives

Élément	Description et interactions
Légende	Tout visuel imagé (photographie, vidéo, illustration) doit avoir un descriptif qui l’accompagne, incluant, dans l’ordre, une courte légende ainsi qu’un crédit. Ces deux éléments sont obligatoires par souci légal. Elle est courte, précise et apporte un complément d'information par rapport au texte de l'article web (ne pas recopier une phrase intégrale du texte). Elle identifie les personnalités présentes sur la photo, même si elles sont très connues. Elle est référencée. Les mots-clés pertinents permettent aux moteurs de recherche d’indexer les contenus et ainsi augmenter leur portée. Mentionner les éléments visuels de l’image est insuffisant dans la légende. Il faut mettre en contexte la photo dans la nouvelle.
Crédit d'auteur	Tout visuel imagé (photographie, vidéo, illustration) doit avoir un descriptif qui l’accompagne, incluant, dans l’ordre, une courte légende ainsi qu’un crédit. Ces deux éléments sont obligatoires par souci légal. Pour les crédits, deux intitulés sont possibles : pour une photo, l’intitulé est PHOTO, alors que pour une vidéo ou une illustration de données, l’intitulé est SOURCE.

Spécificités des images informatives complexes

Parfois, l’image véhicule des informations riches qu’il n’est pas possible de retranscrire sous forme de texte brut, via le simple attribut « alt » (schémas, graphiques complexes, etc.).

Élément	Description et interactions
Titre	Annoncer le sujet de l'image.
Texte alternatif	Décrire brièvement la fonction de l’image. Exemple : Le calendrier du maître d’ouvrage (description détaillée disponible via le lien ci-dessous).
Description détaillée ou transcription des données de l'image	Véhiculer une information identique ou équivalente à celle véhiculée par l’image ou le contenu riche complexe. La description se situe directement sous l’image, sous forme d'accordéon avec la mention "Consulter sous forme de texte".

Spécificités des images décoratives

Une image décorative ou illustrative est une image qui ne véhicule pas d'information. Sauf exception, ces images doivent être masquées pour les utilisateurs qui naviguent avec un lecteur d'écran. Il n'empêche pas que le texte alternatif reste important pour tous les points mentionnés plus haut.

Exemples de différence entre la légende et le texte alternatif d'une image

Légende	Texte alternatif
Des garderies privées refusent de s'affilier à un bureau coordonnateur.	Des jouets sont rangés dans des bacs dans une garderie.
Maintenant que la période de recrutement est terminée, la SOPFEU prendra plusieurs semaines pour former les nouvelles recrues en matière d'interventions (archives).	L'écusson de la Société de protection des forêts contre le feu sur la veste d'un pompier forestier.
Les électeurs devront choisir lundi la personne qui remplacera Catherine Fournier dans la circonscription de Marie-Victorin, à Longueuil.	Catherine Fournier devant un lutrin.
Maxym Croteau n'est pas réellement le candidat caquiste dans la circonscription de La Pinière.	Une fausse pancarte politique avec une photo de Maxym Croteau et le texte "Maxym Croteau - La Pinière".
Les policiers ont pu arrêter un suspect peu après leur arrivée sur les lieux.	Une fourgonnette de la police est stationnée près d'un cordon de sécurité la nuit.

Différents ratios disponibles

Références

Annexe

Ressources

Dernières modifications


`10/2022`	Révision de l'accessibilité par Véronique Leclerc
`04/2022`	Rédaction par Mathieu Côté