HTML <img> alt-Attribut
Definition und Verwendung
alt Das Attribut ist ein obligatorisches Attribut, das den alternativen Text angibt, der angezeigt wird, wenn das Bild nicht angezeigt werden kann.
Wenn der Benutzer die Bilder aufgrund der folgenden Gründe nicht anzeigen kann, kann das alt-Attribut dem Bild alternative Informationen bieten:
- zu langsames Internet
- Fehler im src-Attribut
- Der Browser deaktiviert Bilder
- Der Benutzer verwendet einen Screen-Reader
Das alt-Attribut des <img>-Tags spezifiziert den alternativen Text, der im Browser angezeigt wird, wenn das Bild nicht angezeigt werden kann oder wenn der Benutzer die Anzeige von Bildern deaktiviert hat.
Wir empfehlen dringend, dass Sie dieses Attribut in jedem Bild des Dokuments verwenden. So können Benutzer auch dann Informationen darüber sehen, was verloren gegangen ist, wenn das Bild nicht angezeigt werden kann. Und für Menschen mit Behinderungen ist das alt-Attribut oft der einzige Weg, um den Inhalt des Bildes zu verstehen.
Hinweis:Um ein Tool-Tip für das Bild zu erstellen, verwenden Sie bitte: title-Attribut!
Hinweise und Anmerkungen
Anmerkung:alt Der Wert des Attributs ist eine Zeichenkette, die maximal 1024 Zeichen enthalten kann, einschließlich Leerzeichen und Satzzeichen. Diese Zeichenkette muss in Anführungszeichen stehen. Diese alt-Textzeile kann Referenzen zu speziellen Zeichen enthalten, aber sie dürfen keine anderen Arten von Markierungen enthalten, insbesondere keine Stylings-Tags.
Anmerkung:Wenn der Benutzer den Mauszeiger auf das img-Element bewegt, zeigt Internet Explorer den Wert des alt-Attributs an. Dies ist nicht korrekt. Alle anderen Browser nähern sich dem Standard, indem sie nur dann den alternativen Text anzeigen, wenn das Bild nicht angezeigt werden kann.
Hinweis:Um ein Tool-Tip für das Bild zu erstellen, verwenden Sie bitte: title-Attribut.
Beispiel
Beispiel 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulpen" />
Wenn das Bild nicht angezeigt werden kann, zeigt der Browser einen alternativen Text an, wie zum Beispiel:
In addition, when the user moves the mouse over the image, the latest browsers will display descriptive text in a text box. The following code adds descriptive text to the image in the alt attribute:
You can move the mouse over the following photo to see the corresponding effect:
The text box in the red circle is the effect displayed by the IE7 browser when the mouse is moved over the image:
Example 2
Specified alternative text image:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syntax
<img alt="text">
attribute value
| value | description |
|---|---|
| text |
Specify the alternative text for the image. Principles of using alt text:
|
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
