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

Remarque

Que la balise <img /> soit décorative, informative ou qu’elle serve de lien/bouton, elle doit dans tous les cas posséder un attribut alt ; ce afin de s’assurer que les lecteurs d’écran ne restituent pas sa source (soit le contenu de son attribut src).

<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

Lorsqu’une balise <img /> informative 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 que le lien « Conditions Générales de Vente » s’ouvre dans une nouvelle fenêtre :

<a …>
   Conditions Générales de Vente
   <img src="nouvelle-fenetre.png" alt="(nouvelle fenêtre)" />
</a>

Attention

Il est fortement déconseillé de rédiger le texte de remplacement d’une image en commençant par alt="Image […]". Cette information sera déjà annoncée par les aides techniques lors de la lecture d’une balise <img />.

<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>

Attention

Il est fortement déconseillé de rédiger l’attribut alt d’une balise <img /> servant de lien ou bouton en commençant respectivement par alt="Lien vers […]" ou alt="Bouton […]". Cette information sera déjà annoncée par les aides techniques lors de la lecture d’une balise <a> ou <button>.

<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"  />

Attention

Il est fortement déconseillé de rédiger l’attribut alt d’une balise <input type="image" /> en commençant par alt="Bouton […]".
Cette information sera déjà annoncée par les aides techniques lors de la lecture d’une balise <input type="image" />.

Aller plus loin

3 commentaires

  • Par frédéric HALNA, le 12 mars 2016 à 16h44.

    Bonjour,

    L’intitulé de cette règle n’est pas structuré comme les autres.

    Je suggère: Fournir un attribut alt aux balises <img /> et <input type="image" />.

    Frédéric.

    Répondre

    • Par Sébastien Delorme, le 16 mars 2016 à 11h40.

      Bonjour Frédéric,

      En fait, nous n’avions initialement pas intitulé cette fiche de la même façon, car nous avons une fiche SVG, une fiche pour les polices d’icônes et une fiche pour les images.

      Si pour les images, un titre peut aisément être trouvé (autour de l’attribut alt), c’est plus difficile pour SVG et les polices d’icônes car nous expliquons comment gérer les visuels décoratifs et ceux porteurs d’information.

      Toutefois, pour être cohérents avec l’ensemble des autres fiches, tu as raison, et nous avons mis à jour de la façon suivante :

      Merci pour ton retour.
      Sébastien.

      Répondre

  • Par Sébastien Delorme, le 16 mars 2016 à 11h40.

    Mise à jour du titre de la fiche effectuée le 16/03/2016.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page