Rédiger un texte alternatif utile
Objectif : Fournir un texte alternatif qui restitue l’information d’une image informative du festival.
Une image peut apporter une information que le texte de la page ne donne pas. Si elle ne s’affiche pas, ou si une personne ne peut pas la percevoir, cette information risque de manquer. Dans cette leçon, vous allez rédiger un texte alternatif qui décrit utilement la photo de la scène du Festival des Rives.
À quoi sert l’attribut alt ?
L’attribut alt fournit un texte de remplacement pour l’image. Il est notamment utile lorsque le fichier ne peut pas être chargé et aux personnes qui utilisent un lecteur d’écran. Pour l’image informative du festival, choisissez une formulation qui transmet ce qu’elle montre et qui apporte un élément pertinent au contexte de la page.
L’image du projet montre la scène principale installée dans le parc, avec un public réuni en soirée. La description peut donc nommer ces éléments. Elle n’a pas à raconter toute la scène ni à répéter le nom du festival si celui-ci est déjà évident dans la page.
Écrire une description précise et concise
Un texte alternatif utile répond à une question simple : quelle information importante cette image apporte-t-elle ici ? Décrivez le sujet et, si cela aide à comprendre l’image, son contexte. Restez fidèle à ce qui est visible : n’ajoutez pas de détail supposé, comme le nom d’un artiste ou le nombre de spectateurs, si vous ne pouvez pas le vérifier.
- Trop vague : « Une photo du festival. » Le lecteur ne sait pas ce qu’elle représente.
- Plus informative : « La scène principale installée dans le parc, devant un public réuni en soirée. » Les éléments utiles sont nommés.
- À éviter : une longue description de chaque détail visuel, ou une information qui n’est pas visible.
Le texte alternatif se renseigne dans l’attribut alt de l’élément img. Il s’agit d’un attribut, pas d’un paragraphe ajouté sous la photo. Dans cette leçon, vous conservez le chemin d’image déjà établi et remplacez la description précédente par une formulation adaptée à son contenu.
Page complète du projet
Le fichier ci-dessous reprend la page complète du Festival des Rives à l’état actuel du projet. Les liens vers les deux scènes pointent vers les identifiants placés sur leurs titres, et les concerts restent présentés dans des listes ordonnées. La modification de cette leçon concerne le texte de l’attribut alt de l’image ; le reste de la page est conservé.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Festival des Rives — Programme</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="festival-page">
<header class="festival-page__entete">
<h1>Festival des Rives</h1>
<p>Deux jours de musique au cœur de la ville.</p>
<nav class="festival-page__navigation" aria-label="Navigation principale">
<ul>
<li><a class="festival-page__lien" href="#presentation">Présentation</a></li>
<li><a class="festival-page__lien" href="#programme">Programme</a></li>
<li><a class="festival-page__lien" href="#scene-riviere">Scène de la Rivière</a></li>
<li><a class="festival-page__lien" href="#scene-jardin">Scène du Jardin</a></li>
<li><a class="festival-page__lien" href="#acces">Accès</a></li>
</ul>
</nav>
</header>
<main class="festival-page__contenu">
<section class="festival-page__presentation" id="presentation">
<h2>Un festival local et convivial</h2>
<p>Retrouvez des artistes de la région et des découvertes musicales dans le parc des Rives.</p>
<img class="festival-page__image" src="assets/festival-scene.jpg" alt="La scène principale installée dans le parc, devant un public réuni en soirée">
<p>Pour découvrir les initiatives de la ville, consultez le <a class="festival-page__lien" href="https://www.example.org/">site de la mairie</a>.</p>
</section>
<section class="festival-page__programme" id="programme">
<h2>Programme des concerts</h2>
<section class="festival-page__scene" aria-labelledby="scene-riviere">
<h3 id="scene-riviere">Scène de la Rivière — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T18:00">18 h</time> — Les Lucioles</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T20:00">20 h</time> — Rivage Sonore</li>
</ol>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T19:00">19 h</time> — Trio des Pins</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T21:00">21 h</time> — Les Échos</li>
</ol>
</section>
</section>
<section class="festival-page__acces" id="acces">
<h2>Préparer votre venue</h2>
<p>Le festival se déroule au parc des Rives, accessible à pied depuis la gare centrale.</p>
<ul>
<li>Adresse : 12, avenue du Parc, 00000 Ville-sur-Rive.</li>
<li>Entrée gratuite dans la limite des places disponibles.</li>
<li>Un stationnement vélo est disponible près de l'entrée.</li>
</ul>
<p><a class="festival-page__lien" href="#presentation">Retour à la présentation</a></p>
</section>
</main>
<footer class="festival-page__pied">
<p>Festival des Rives — informations susceptibles d'être mises à jour.</p>
</footer>
</body>
</html>Après avoir enregistré le fichier, vérifiez le texte en relisant l’attribut alt : décrit-il bien l’image, sans supposition ni répétition inutile ? Si le fichier image est momentanément indisponible, le texte alternatif doit encore permettre de comprendre l’information principale. L’affichage de l’image dans le navigateur ne suffit donc pas à valider sa description.
À retenir
- L’attribut alt transmet l’information utile d’une image informative.
- Décrivez ce qui est visible et pertinent dans le contexte de la page.
- Évitez les formulations vagues, les détails inventés et les descriptions inutilement longues.
- Vérifiez que le texte reste compréhensible même si l’image ne s’affiche pas.
Dans la prochaine leçon, vous associerez une image à une légende avec les éléments figure et figcaption.