6.1. Gérer l’attribut alt des balises <img /> et <input type="image" />

• <img /> décoratives/illustratives.
• <img /> informatives « simples ».
• <img /> informatives « complexes ».
• <img /> liens ou boutons seules.
• <input type="image" />.

<img /> décoratives/illustratives

Lorsqu’une balise <img /> décorative ou illustrative est intégrée dans le code HTML, l’attribut alt doit être laissé vide (sans aucun espace entre les guillemets de alt="").

Dans l’exemple de code HTML ci-après, la balise <img /> accompagne simplement le titre « Messages d’erreur » (explicite par nature) :

<h2>
   <img src="erreur.png" alt="" />
   Messages d'erreur
</h2>

<img /> informatives « simples »

Une image informative « simple » est une image informative qui peut être décrite par le biais d’une alternative textuelle concise.

Lorsqu’une balise <img /> informative « simple » est intégrée dans le code HTML, renseigner son attribut alt avec une information égale ou équivalente à celle véhiculée par l’image.

Dans l’exemple de code HTML ci-après, la balise <img /> indique qu’il s’agit d’une étape de marche :

<p>
  <img src="marche.png" alt="Marche : " />
  <span>2 min</span>
  <span>111 m</span>
</p>

<img /> informatives « complexes »

Une image informative « complexe » est une image informative qui nécessite une description détaillée.

Lorsqu’une balise <img /> informative « complexe » est intégrée dans le code HTML :

1. Renseigner son attribut alt avec les informations permettant de rendre l’image explicite.
2. Proposer une description détaillée de l’image directement sous cette dernière.
3. Enfin, indiquer dans l’attribut alt où trouver cette description détaillée.

Dans l’exemple de code HTML ci-après, la balise <img /> indique à la fois la fonction de l’image et où trouver sa description détaillée :

<h2>Le calendrier du maître d'ouvrage</h2>
<img src="calendrier.png" alt="Calendrier du maître d'ouvrage et travaux prévus entre 2011 et 2020 (description détaillée ci-après)" />
<button aria-expanded="true">Le calendrier au format texte</button>
<ul>
  <li><strong>2011 :</strong> Concertation publique</li>
  [...]
</ul>

<img /> liens ou boutons seules

Lorsqu’une balise <img /> seule (sans intitulé) servant de lien ou de bouton est intégrée dans le code HTML, intégrer les informations permettant de le rendre explicite dans son attribut alt.

Dans l’exemple de code HTML ci-après, la balise <img /> pointe vers la page d’accueil d’un site :

<a href="/">
   <img src="accueil.png" alt="Accueil" />
</a>

<input type="image" />

Lorsqu’une balise <input type="image" /> est intégrée dans le code HTML, intégrer les informations permettant de rendre le bouton explicite dans son attribut alt.

Dans l’exemple de code HTML ci-après, la balise <input type="image" /> permet de lancer une recherche dans un site :

<input type="image" src="loupe.png" alt="Lancer la recherche"  />

4 commentaires

Haut de page