ALT-Attribute sind Tags, die verwendet werden, um Bilder in einem HTML-Dokument alternative oder ergänzende Informationen zu hinterlegen. Diese Informationen erleichtern dem Nutzer die Zugänglichkeit zu Medien, besonders wenn der User-Agent (z.B. der Browser) diese nicht unterstützt oder das automatische Laden von Medien deaktiviert ist.
Suchmaschinen verwenden das Alt-Attribut, um den Inhalt des Bildes zu erkennen. Darüber hinaus trägt der Alt-Tag maßgeblich zur Barrierefreiheit des Internets bei.
Hier ist ein Beispiel für die Verwendung des ALT-Attributs in einem HTML-Bildtag:
<img src="bild.jpg" alt="Ein Bild von einer Landschaft">Im obigen Beispiel wird das Bild „bild.jpg“ angezeigt und der alternative Text „Ein Bild von einer Landschaft“ wird angezeigt, falls das Bild nicht angezeigt werden kann.
Das ALT-Attribut ist auch wichtig für die Barrierefreiheit, da es Benutzern mit Sehbehinderungen ermöglicht, das Bild mithilfe von Bildschirmleseprogrammen zu beschreiben.
Einige weitere Beispiele für die Verwendung des ALT-Attributs:
<img src=“logo.png“ alt=“Unser Firmenlogo“>
<img src=“katze.jpg“ alt=“Ein Foto von einer süßen Katze“>
<img src=“diagramm.png“ alt=“Ein Diagramm, das die jährlichen Verkaufszahlen darstellt“>
Wie man gute Alt-Texte schreibt
Möchtest du, dass die Websites deiner Kunden bei Google & Co. weiter oben erscheinen? Dann sind hier ein paar Tipps für Alt-Texte:
- Bilder-Typen checken: Manche Bilder erzählen eine Geschichte, andere sind nur zur Deko, wieder andere haben eine Funktion (z.B. ein Download-Button) und manche sind kompliziert, wie Infografiken.
- Story-Bilder: Bei Bildern, die eine Info oder Emotion rüberbringen, beschreibe genau, was du siehst und fühlst.
- Deko-Bilder: Bei Bildern, die nur schick aussehen, aber keine Info haben, setze einfach <img alt=””>. So wissen Screenreader, dass sie das Bild überspringen können.
- Funktions-Bilder: Bei Bildern, die eine Aktion auslösen (z.B. ein Download-Button), beschreibe nicht das Bild, sondern was passiert, wenn man draufklickt.
- Komplexe Bilder: Bei komplizierten Bildern, wie Infografiken, versuche die wichtigsten Infos im Alt-Text zusammenzufassen.
Tipps für gute Alt-Texte:
- Kurz und knackig: Versuche, unter 125 Zeichen zu bleiben.
- Qualität zählt: Der Alt-Text sollte das Bild gut beschreiben, auch wenn er kurz ist.
- Text als Bild? Lieber nicht!: Außer bei Logos. Wenn doch, dann sollte der Alt-Text genau den Text vom Bild haben.
- Bilder mit mehreren Links: Gib dem gesamten Bild einen allgemeinen Alt-Text und jedem Link seinen eigenen.
- Kein Blödsinn: Ein schlechter Alt-Text kann schlimmer sein als gar keiner. Also immer sinnvoll beschreiben!