Texte alternatif des images : quand et comment
Rédigez un texte alternatif qui restitue le sens des images non décoratives.
Texte alternatif des images : quand et comment est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce que le texte alt ?
L’attribut alt fournit un texte alternatif pour les images :
- Il est lu par les lecteurs d’écran à la place de l’image
- Il est affiché lorsque l’image ne se charge pas
- Il est indexé par les moteurs de recherche
- Il est obligatoire pour respecter les exigences de WCAG
La règle d’or
Le texte alt doit transmettre les mêmes informations ou la même fonction que l’image pour un utilisateur voyant :
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Images informatives
Pour les images qui transmettent des informations, décrivez le contenu :
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Images décoratives : alt vide
Les images purement décoratives doivent avoir un alt vide afin d’être ignorées :
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Images fonctionnelles
Pour les images qui servent une fonction, décrivez la fonction et non l’apparence :
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Images complexes : figures et descriptions longues
Les graphiques ou diagrammes complexes peuvent nécessiter davantage qu’un alt court :
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Images contenant du texte
Évitez les images contenant du texte ; si vous devez en utiliser, l’alt doit correspondre exactement au texte :
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->Le contexte modifie le texte alt
Une même image peut nécessiter un texte alt différent selon le contexte :
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Longueur du texte alt
Conseils concernant la longueur du texte alt :
- Restez concis — il n’est pas nécessaire de commencer par « Image de » ou « Photo de »
- Visez moins de 125 caractères (certains lecteurs d’écran tronquent le texte à 125 caractères)
- Pour les images complexes, utilisez un alt bref et aria-describedby pour fournir une description détaillée
- Ne surchargez pas le texte de mots-clés — écrivez pour les personnes
Tester le texte alt
Comment tester votre texte alt :
- Désactivez les images dans le navigateur (Firefox : Outils → Style de la page → Aucun style)
- Utilisez l’outil WAVE pour voir tous les textes alt en une seule fois
- Écoutez avec VoiceOver/NVDA ce qui est annoncé
- Exécutez Lighthouse : Accessibilité → Les éléments d’image possèdent des attributs [alt]
SVG et noms accessibles
Pour les SVG intégrés, fournissez les noms accessibles d’une autre manière :
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Vérification rapide
Quelle valeur alt une image purement décorative doit-elle avoir ?
Récapitulatif : texte alt
Principes essentiels du texte alt :
- Incluez toujours l’attribut alt ; utilisez alt="" pour les images décoratives
- Décrivez les informations, pas l’apparence
- Images fonctionnelles : décrivez l’action ou la destination
- Images complexes : alt court + aria-describedby pour la description complète
- Images contenant du texte : l’alt doit correspondre exactement au texte
Questions Fréquemment Posées
La leçon « Texte alternatif des images : quand et comment » est-elle gratuite ?
Oui — le texte complet de « Texte alternatif des images : quand et comment » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Texte alternatif des images : quand et comment » ?
Rédigez un texte alternatif qui restitue le sens des images non décoratives. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Texte alternatif des images : quand et comment » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pourquoi l’accessibilité compte : niveaux WCAG
- Hiérarchie des titres pour les lecteurs d’écran
- Texte alternatif des images : quand et comment
- Navigation au clavier et ordre de mise au point