W3docs
fr
Se connecter

Attribut alt en HTML

L'attribut alt fournit un texte alternatif affiché si l'élément ne peut pas être rendu. Découvrez des exemples sur différents éléments HTML.

L'attribut HTML alt fournit un texte alternatif pour une image (ou un élément similaire à une image). Il est lu à voix haute par les lecteurs d'écran et s'affiche à la place de l'image lorsque celle-ci ne parvient pas à se charger. Cette page explique à quoi ressemble un bon texte alternatif, comment alt se comporte sur chaque élément qui le prend en charge, et les erreurs courantes à éviter.

Vous pouvez utiliser l'attribut alt sur les éléments suivants : <area>, <img> et <input type="image">.

Pourquoi le texte alt est important

L'attribut alt remplit trois fonctions à la fois :

  • Accessibilité. Les utilisateurs de lecteurs d'écran ne peuvent pas voir l'image, donc le texte alt est l'image pour eux. Décrire le contenu leur permet de suivre la page. Un alt significatif est ce qui rend une image véritablement accessible.
  • Affichage de secours en cas d'image manquante. Si le fichier image est absent, si le chemin est incorrect ou si la connexion est lente, le navigateur affiche le texte alt à la place de l'image plutôt qu'une case vide. Cela maintient la page utilisable.
  • SEO (un avantage mineur). Les moteurs de recherche peuvent lire le texte alt pour comprendre ce que montre une image, ce qui aide pour la recherche d'images. Considérez cela comme un bénéfice secondaire — rédigez l'alt pour les humains en premier, pas pour y bourrer des mots-clés.
Danger

Pour l'élément <img>, l'attribut alt est obligatoire. L'omettre entièrement constitue une violation d'accessibilité : un lecteur d'écran se rabattra sur l'annonce du nom de fichier, ce qui est rarement utile. Un alt="" vide est un choix délibéré et valide pour les images décoratives — ce n'est pas la même chose qu'omettre alt.

Rédiger un bon texte alt

Essayez de décrire l'image comme vous la décririez à quelqu'un qui ne peut pas la voir, dans le contexte du contenu environnant.

  • Soyez descriptif et précis, mais concis — environ 125 caractères ou moins. Les lecteurs d'écran peuvent ne pas bien marquer de pause dans un texte alternatif très long.
  • Ne commencez pas par « image de » ou « photo de ». Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image, ce préfixe est donc redondant.
  • Transmettez la fonction ou le contenu important dans le contexte, pas chaque détail visuel.
  • Omettez le texte alt pour les images purement décoratives en utilisant alt="" (voir ci-dessous).

Bon vs. mauvais texte alt

Pour la même photo d'un golden retriever attrapant un frisbee dans un parc :

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Images décoratives : utiliser un alt vide

Si une image n'apporte aucune information — un séparateur, un ornement de fond, une icône à côté d'un texte qui dit déjà la même chose — donnez-lui un alt="" vide. Cela indique aux lecteurs d'écran d'ignorer complètement l'image, plutôt que d'annoncer un nom de fichier.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Info

Retenez bien la distinction : alt="" = « cette image est décorative, ignorez-la. » Pas d'alt du tout = une erreur qui prive les utilisateurs de lecteurs d'écran de toute alternative.

Syntaxe

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

L'attribut alt sur <area>

Dans une image map, chaque <area> cliquable agit comme un lien, donc son alt doit décrire vers où cette zone mène — tout comme vous rédigeriez le texte d'un lien. Chaque <area> nécessite son propre alt distinct ; réutiliser la même valeur pour différentes destinations empêche les utilisateurs de distinguer les régions.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Essayez vous-même »

L'attribut alt sur <img>

Il s'agit de l'utilisation la plus courante. Décrivez ce que montre l'image dans le contexte de la page. Si l'image est accompagnée d'une légende visible, envisagez de l'encadrer dans un <figure> avec un <figcaption>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Essayez vous-même »

L'attribut alt sur <input type="image">

Un <input type="image"> est un bouton de soumission graphique. Ici, l'alt doit décrire l'action du bouton, pas l'image — par exemple alt="Submit" ou alt="Search" — car c'est ce qu'un utilisateur a besoin de savoir lorsque l'image ne se charge pas. L'attribut alt n'est valide sur <input> que lorsque type="image".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Essayez vous-même »

Pratique

Pratique
Quel est le rôle de l'attribut 'alt' en HTML ?
Quel est le rôle de l'attribut 'alt' en HTML ?

Sujets connexes

Was this page helpful?