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

Dans un formulaire HTML, il est possible d'utiliser une image comme bouton d'envoi avec <input type="image">. Mais une image peut ne pas s'afficher : lien cassé, chemin incorrect dans src, connexion trop lente, ou navigateur en mode texte. L'attribut alt prévoit ce cas : il fournit un texte de secours visible à la place de l'image, et lu à voix haute par les lecteurs d'écran.

À noter : alt ne fonctionne que sur <input type="image">. Sur n'importe quel autre type d'input (text, submit, checkbox…), cet attribut n'a aucun effet et est simplement ignoré.

Syntaxe

<input type="image" alt="texte de remplacement">

Exemple 1 : bouton d'envoi basé sur une image

Voici le cas le plus courant : une image joue le rôle du bouton Envoyer. Quand l'image charge normalement, l'utilisateur voit le graphique. Quand elle est absente — chemin erroné, fichier supprimé — le texte de l'attribut alt prend sa place. Le formulaire reste utilisable dans les deux situations.

<form action="traitement.php" method="post">
  <label for="nom">Votre nom :</label>
  <input type="text" id="nom" name="nom">
  <!-- Si submit.gif ne charge pas, "Envoyer" s'affiche à sa place -->
  <input type="image" src="images/submit.gif" alt="Envoyer" width="48" height="48">
</form>

Exemple 2 : action explicite dans le texte alternatif

Le texte de l'attribut alt doit décrire l'action du bouton, pas l'image elle-même. Un bouton de validation de commande ne doit pas dire "icône verte" mais "Valider la commande". Les lecteurs d'écran lisent ce texte à l'utilisateur — c'est tout ce qu'il entend pour comprendre ce que fait le bouton.

<form action="commande.php" method="post">
  <input type="hidden" name="produit_id" value="42">
  <!-- alt décrit l'action, pas l'apparence du bouton -->
  <input
    type="image"
    src="images/btn-valider.png"
    alt="Valider la commande"
    width="120"
    height="40"
  >
</form>

Valeurs acceptées

Compatibilité navigateurs

L'attribut alt sur <input type="image"> fonctionne dans tous les navigateurs actuels : Chrome, Firefox, Safari, Edge et Opera. Aucune particularité de compatibilité à gérer en 2026.

HTML 4.01 vs HTML5

Aucun changement de comportement entre les deux versions. L'attribut existe depuis HTML 4.01 et HTML5 n'y a rien modifié — ni la syntaxe, ni les valeurs acceptées, ni le rendu.

Bonne pratique : alt vide interdit ici

Pour les images décoratives, l'usage courant est de laisser alt="" vide. Ce n'est pas la bonne approche sur un <input type="image">. Le bouton déclenche une action — l'utilisateur de lecteur d'écran a besoin de savoir laquelle. Un alt absent ou vide rend le bouton muet pour les technologies d'assistance, ce qui enfreint le critère 1.1.1 des WCAG 2.1 (niveau A).

Règle simple : le texte de alt doit répondre à la question « Ce bouton fait quoi ? », pas « À quoi ressemble cette image ? »