Recommandation de cours :
Attribut alt <img> HTML
Tooltip et remarques Définition et utilisation
C'est un attribut obligatoire, il définit le texte de remplacement à afficher lorsque l'image ne peut pas être affichée.
- Supposons que l'utilisateur ne puisse pas voir l'image pour les raisons suivantes, l'attribut alt peut fournir des informations de remplacement pour l'image :
- Téléchargement trop lent
- Erreur dans l'attribut src
- Le navigateur désactive les images
L'utilisateur utilise un lecteur d'écran
L'attribut alt de la balise <img> spécifie le texte de remplacement, utilisé lorsque l'image ne peut pas être affichée ou lorsque l'utilisateur désactive l'affichage des images, pour afficher le contenu en remplacement de l'image dans le navigateur.
Astuce :Nous recommandons vivement d'utiliser cette propriété pour chaque image de votre document. De cette manière, même si l'image ne peut pas être affichée, l'utilisateur peut voir des informations sur ce qui a été perdu. De plus, pour les personnes handicapées, l'attribut alt est souvent leur seule manière de comprendre le contenu de l'image. Attribut titlePour créer un tooltip pour l'image, utilisez
!
Remarque :Tooltip et remarques La valeur de l'attribut est une chaîne de caractères qui peut contenir jusqu'à 1024 caractères, y compris des espaces et des points de repère. Cette chaîne doit être entourée de guillemets. Ce texte alt peut contenir des références à des caractères spéciaux, mais ne permet pas d'autres types de balises, en particulier aucune balise de style.
Remarque :Lorsque l'utilisateur déplace le curseur sur l'élément img, Internet Explorer affiche la valeur de l'attribut alt. Ce comportement n'est pas correct. Tous les autres navigateurs suivent la norme, en affichant le texte de remplacement uniquement lorsque l'image ne peut pas être affichée.
Astuce :Si vous souhaitez créer un tooltip pour l'image, utilisez Attribut title.
Exemple
Exemple 1
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
Si l'image ne peut pas être affichée, le navigateur affichera un texte de remplacement, comme ceci :
En plus, lorsque l'utilisateur déplace le curseur au-dessus de l'image, les navigateurs les plus récents affichent un texte descriptif dans une boîte de texte. Le code suivant ajoute un texte descriptif à l'attribut alt de l'image :
Vous pouvez déplacer le curseur sur la photo suivante pour voir l'effet correspondant :
Le texte dans le cercle rouge est l'effet affiché par le navigateur IE7 lorsque l'utilisateur déplace le curseur sur l'image :
Exemple 2
Image avec texte alternatif spécifié :
<img src="img_girl.jpg" alt="Fille dans un manteau" width="500" height="600">
Syntaxe
<img alt="text">
Valeur de l'attribut
| Valeur | Description |
|---|---|
| text |
Définir le texte alternatif de l'image. Principes d'utilisation du texte alt :
|
Compatibilité du navigateur
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
