HTMLImageElement : propriété alt

Valeur

Une chaîne de caractères contenant le texte alternatif à afficher lorsque l'image n'est pas chargée ou à destination des dispositifs d'assistance.

L'attribut alt est officiellement obligatoire : il doit toujours être renseigné. Si l'image ne nécessite pas de texte de remplacement (par exemple, pour une image décorative ou une icône d'information de faible importance), vous pouvez indiquer une chaîne de caractères vide (""). Pour des raisons de compatibilité, les navigateurs acceptent généralement une image sans attribut alt, mais il est recommandé de toujours l'utiliser.

Notes d'utilisation

La règle fondamentale pour l'attribut alt est que le texte alternatif de chaque image doit pouvoir remplacer l'image sans modifier le sens de la page. Il ne faut jamais utiliser alt pour un texte qui pourrait être interprété comme une légende ou un titre. Il existe d'autres attributs et éléments prévus à cet effet.

Exemples

Au-delà de cela, il existe des recommandations supplémentaires pour bien utiliser alt selon l'usage de l'image. Elles sont illustrées dans les exemples suivants.

Images décoratives

Les images sans signification sémantique — purement décoratives ou à valeur informative très limitée — doivent avoir leur attribut alt défini à la chaîne de caractères vide (""). C'est illustré dans l'exemple suivant.

HTML

Dans le HTML de cet exemple, l'élément <img> inclut la propriété alt, ce qui empêche l'image d'avoir un texte alternatif, puisqu'il s'agit d'un détail décoratif.

<div class="container">
  <div class="left-margin">
    <img src="margin-flourish.svg" alt="" />
  </div>
  <div class="contents">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci
      ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
      neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar
      ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus
      laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus
      scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.
    </p>
  </div>
</div>

body {
  margin: 0;
  padding: 0;
}

p {
  margin-block-start: 0;
  margin-block-end: 1em;
  margin-top: 0;
  margin-bottom: 1em;
}

.container {
  width: 100vh;
  height: 95vh;
  font:
    16px Arial,
    Helvetica,
    sans-serif;
}

.left-margin {
  background-color: rgb(241 240 237);
  width: 9em;
  height: 100%;
  float: left;
  margin-right: 5px;
  padding-right: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-margin img {
  width: 6em;
}

.contents {
  background-color: rgb(241 240 235);
  height: 100%;
  margin-left: 2em;
  padding-top: 1em;
  padding-left: 2em;
  padding-right: 1em;
}

Résultat

Images utilisées comme boutons

Lorsque vous utilisez une image comme bouton (en l'utilisant comme unique enfant visible d'un élément HTML <a> représentant un lien), l'attribut alt doit servir à exprimer la fonction du bouton. Autrement dit, il doit s'agir du même texte que celui que vous utiliseriez pour un bouton textuel ayant le même objectif.

Par exemple, dans l'extrait HTML ci-dessous, une barre d'outils utilisant des icônes comme libellés de liens fournit un attribut alt pour chacune, donnant un libellé textuel à utiliser à la place de l'icône si les icônes ne sont pas affichées ou sont volontairement désactivées.

<li class="toolbar" role="toolbar">
  <a href="songs.html" role="button">
    <img src="songicon.svg" alt="Songs" />
  </a>
  <a href="albums.html" role="button">
    <img src="albumicon.svg" alt="Albums"
  /></a>
  <a href="artists.html" role="button">
    <img src="artisticon.svg" alt="Artists" />
  </a>
  <a href="playlists.html" role="button">
    <img src="playlisticon.svg" alt="Playlists" />
  </a>
</li>

Images contenant des schémas ou des cartes

Lorsqu'une image présente des informations sous forme de schéma, graphique, diagramme ou carte, le texte alt doit fournir la même information, au moins sous forme résumée. C'est valable que l'image soit au format bitmap comme PNG ou JPEG, ou au format vectoriel comme SVG.

• Pour une carte, le texte alt peut donner les indications pour se rendre à l'endroit indiqué, comme vous l'expliqueriez à l'oral.
• Pour un graphique, le texte peut décrire les éléments du graphique et leurs valeurs.
• Pour un schéma, le texte peut expliquer le concept présenté.

Gardez à l'esprit que tout texte inclus dans les schémas et graphiques au format SVG peut être lu par les lecteur·ice·s d'écran. Cela peut influencer la façon dont vous rédigez le texte alt du schéma.

Icônes ou logos

Les logos (par exemple, d'entreprise ou de marque) et les icônes informatives doivent utiliser le texte correspondant dans leur chaîne de caractères alt. Autrement dit, si l'image est un logo d'entreprise, le texte alt doit être le nom de l'entreprise. Si l'image est une icône représentant un état ou une information, le texte doit être le nom de cet état.

Par exemple, si une image est un badge affiché sur une page pour indiquer que le contenu est nouveau et a été récemment mis à jour, le texte alt correspondant pourrait être « Mis à jour récemment » ou même « Mis à jour le 27 août 2019 ».

Dans cet exemple, une image en étoile avec le mot « Nouveau ! » est utilisée pour indiquer qu'un article porte sur une nouveauté (et probablement aussi quelque chose de supposé enthousiasmant). L'attribut alt est défini à « Nouvelle page ! » pour permettre à ce texte d'être affiché à la place de l'image si celle-ci n'est pas disponible. Il sera également lu par les lecteur·ice·s d'écran.

HTML

Le code HTML suivant crée un extrait de contenu d'un site utilisant l'icône décrite. Notez l'utilisation de l'attribut alt sur <img>, fournissant une bonne chaîne de substitution à utiliser si l'image ne se charge pas. Notez l'utilisation de l'attribut alt sur <img>, fournissant une bonne chaîne de substitution à utiliser si l'image ne se charge pas.

<div class="container">
  <img
    src="https://www.bitstampede.com/mdn-test/new-page.svg"
    alt="New Page!"
    class="page-info-badge" />
  <p class="contents">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci
    ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque
    libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id
    sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet
    cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus
    scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.
  </p>
</div>

CSS

L'élément principal du CSS ici est l'utilisation de clip-path et shape-outside pour habiller le texte autour de l'icône de façon esthétique.

.container {
  max-width: 500px;
}

.page-info-badge {
  width: 9em;
  padding-right: 1em;
  float: left;
  clip-path: polygon(
    100% 0,
    100% 50%,
    90% 70%,
    80% 80%,
    70% 90%,
    50% 100%,
    0 100%,
    0 0
  );
  shape-outside: polygon(
    100% 0,
    100% 50%,
    90% 70%,
    80% 80%,
    70% 90%,
    50% 100%,
    0 100%,
    0 0
  );
}

.contents {
  margin-top: 1em;
  font:
    16px Arial,
    Helvetica,
    Verdana,
    sans-serif;
}

Résultat

Autres images

Les images montrant des objets ou des scènes doivent avoir un texte alt décrivant ce qui est visible sur l'image. Une photo d'une théière jaune pourrait littéralement avoir son attribut alt défini à « Une théière jaune ».

Spécifications

Compatibilité des navigateurs