Allgemein ~2 Min Lesezeit

ALT Attribute (ALT Tags)

ALT-Attribute gehören zum HTML-Standard und ermöglichen die Angabe von Alternativtexten für Bilder — wichtig für SEO und Barrierefreiheit.

Definition

ALT-Attribute gehören zum HTML-Standard und ermöglichen die Angabe von Alternativtexten für Bilder auf Webseiten. Sie sind sowohl für die Suchmaschinenoptimierung (SEO) als auch für die Barrierefreiheit von Webseiten von großer Bedeutung.

ALT Attribute

Sinn und Zweck des Alternativtextes

Bilder und Grafiken spielen eine wichtige Rolle im Webdesign, da sie komplexe Zusammenhänge oft besser vermitteln als Text. Nicht alle Nutzer können visuelle Inhalte erfassen, und auch Suchmaschinen haben Schwierigkeiten, diese vollständig zu verstehen.

ALT-Attribute bieten hierfür eine Lösung, indem sie eine textliche Alternative zu Bildern bereitstellen. Browser und andere Programme greifen auf diesen Text zurück, wenn ein Bild nicht angezeigt werden kann.

Verwendung von ALT-Attributen

ALT-Attribute werden in verschiedenen Fällen genutzt:

  • Bildschirmleseprogramme für Sehbehinderte lesen den Alternativtext vor.
  • Suchmaschinen wie Google analysieren den ALT-Text, um den Inhalt des Bildes zu verstehen.
  • Bei fehlerhaften Bild-Links oder nicht unterstützten Formaten zeigen Browser den ALT-Text an.
  • Nutzer, die die Grafikanzeige deaktivieren, sehen ebenfalls den ALT-Text.

SEO-Relevanz der ALT-Attribute

Suchmaschinen legen großen Wert auf die Qualität der ALT-Texte, da sie helfen, den Inhalt der Bilder und der gesamten Seite zu verstehen und korrekt zu kategorisieren. Gute ALT-Texte können das Ranking der Bilder in der Google Bildersuche verbessern und zusätzlichen Traffic auf die Webseite bringen.

Implementierung von ALT-Attributen im HTML-Code

Das ALT-Attribut ist in HTML Pflicht. Der HTML-Code für Bilder sollte mindestens so aussehen:

<img src="bilddatei.jpg" alt="Alternativer Text">

Bei dekorativen Bildern ohne inhaltliche Bedeutung sollte der Alternativtext leer bleiben:

<img src="hintergrund.jpg" alt="">

Assistenzsoftware ignoriert solche <img>-Tags mit leerem ALT-Attribut.

Anforderungen an das ALT-Attribut

Der Alternativtext sollte ein angemessener und vollständiger Ersatz für den grafischen Inhalt des Bildes sein. Er sollte keine zusätzlichen Inhalte oder Erläuterungen enthalten und lediglich die Bildinhalte beschreiben.

Geeignete Alternativtexte für verschiedene Bildtypen

Der optimale Inhalt eines ALT-Textes hängt vom Bildtyp und dessen Verwendungszweck ab:

  • Eigenständige Bilder: Beschreiben das Bild kurz und prägnant, einschließlich des wichtigsten Keywords.
  • Bilder im Fließtext: Der ALT-Text enthält den Text, den das Bild ersetzt, wie „grinsender Smiley”.
  • Erläuternde Bilder: Wenn die Grafik neue Informationen liefert, sollte der ALT-Text eine Kurzfassung des Bildinhalts enthalten.
  • Dekorative Grafiken: Diese sollten mit leeren ALT-Attributen versehen werden.

Unterschied zum TITLE-Attribut

Das ALT-Attribut ist auf das <img>-Tag beschränkt, während das TITLE-Attribut für die meisten HTML-Elemente verwendet werden kann. ALT-Attribute sind für die Barrierefreiheit und SEO wichtiger und daher obligatorisch, während TITLE-Attribute sparsam eingesetzt werden sollten.