ALT Attribute (ALT Tags)
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.
Sinn und Zweck des Alternativtextes
Bilder und Grafiken spielen eine wichtige Rolle im Webdesign, da sie komplexe Zusammenhänge oft besser vermitteln als Text und die Seite visuell ansprechender gestalten. Während einige Bilder reine Dekoration sind, stellen andere eigenständige Inhalte dar, die für die Besucher von Interesse sind, wie zum Beispiel Fotos auf Instagram oder in einer Online-Galerie.
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. So bleiben die Informationen erhalten und die Benutzer wissen, worum es in der Grafik geht, was die Nutzbarkeit der Seite erhöht.
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, um Ladezeiten zu verkürzen oder Datenvolumen zu sparen, 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. Besonders relevante Bilder können sogar in den organischen Suchergebnissen erscheinen.
Implementierung von ALT-Attributen im HTML-Code
Das ALT-Attribut ist in HTML pflicht. Auch wenn Browser fehlende ALT-Attribute ignorieren, sind sie für eine standardkonforme Webseite erforderlich. Der HTML-Code für Bilder sollte mindestens so aussehen:
<img decoding="async" src="bilddatei.jpg" alt="Alternativer Text">
Bei dekorativen Bildern ohne inhaltliche Bedeutung sollte der Alternativtext leer bleiben:
<img decoding="async" src="hintergrund.jpg" alt="">
Assistenzsoftware ignoriert solche <img>-Tags.
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, sodass die Seite auch ohne Bilder verständlich bleibt.
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. Es fügt Kommentare oder zusätzliche Informationen hinzu, die als Tooltip angezeigt werden. ALT-Attribute sind für die Barrierefreiheit und SEO wichtiger, weshalb sie obligatorisch sind, während TITLE-Attribute sparsam eingesetzt werden sollten.
Mit diesen Richtlinien können Webseitenbetreiber sicherstellen, dass ihre Seiten sowohl benutzerfreundlich als auch für Suchmaschinen optimiert sind.