ALT Attribute: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „== Definition == ALT-Attribute gehören zum HTML Standard. Mit ihnen lassen sich Alternativtexte für Bilder angeben, die in Webseiten eingebunden sind. Sie s…“) |
(kein Unterschied)
|
Version vom 27. August 2018, 10:05 Uhr
Inhaltsverzeichnis
Definition
ALT-Attribute gehören zum HTML Standard. Mit ihnen lassen sich Alternativtexte für Bilder angeben, die in Webseiten eingebunden sind. Sie spielen eine wichtige Rolle bei der Suchmaschinenoptimierung (SEO) und bei barrierefreien, behindertengerechten Webseiten.
Sinn und Zweck des Alternativtextes
Bilder und Grafiken sind wichtige Elemente im Webdesign. Sie vermitteln komplexe Zusammenhänge oft besser als schriftliche Beschreibungen, fassen das Geschriebene anschaulich zusammen und lockern die Seite auf. Für die optische Ästhetik sind Hintergrundbilder, Logos und Banner sowie Rahmen und sonstige Ziergrafiken unverzichtbar. Viele Bilder sind darüber hinaus eigenständige Inhalte, an denen die Webseitenbesucher direkt interessiert sind - beispielsweise Fotos auf Instagram oder in einer Online-Galerie.
Allerdings lassen sich rein visuelle Medien nicht von allen Internetnutzern sehen und auch Suchmaschinen verstehen grafische Inhalte bisher höchstens in Ansätzen. ALT-Attribute lösen dieses Problem, indem sie eine textliche Alternative zum Bild bereitstellen. Webbrowser und andere Programme nutzen diesen Text, falls sich das entsprechende Bild nicht anzeigen, sehen oder verstehen lässt. Selbst bei fehlerhaften oder anderweitig nicht anzeigbaren Bildern gehen keine Informationen verloren und die Besucher wissen immer noch, worum es in der Grafik geht. Dadurch erhöhen die ALT-Texte die Usability (Nutzbarkeit) der Seite und machen sie anwenderfreundlicher.
Im Einzelnen kommt das ALT-Attribut in folgenden Fällen zum Einsatz:
- Bildschirmlese-Programme für Sehbehinderte lesen den alternativen Text vor.
- Suchmaschinen wie Google analysieren den Inhalt des ALT-Textes, um zu erfahren, was in dem Bild zu sehen ist.
- Bei fehlerhaften Bild-Links oder nicht unterstützten Dateiformaten zeigen Webbrowser den Inhalt des ALT-Attributes an.
- Manche Internetnutzer schalten die Grafikanzeige im Browser aus, um das Laden der Seite zu beschleunigen oder Datenvolumen zu sparen. Auch in diesen Fällen zeigt der Webbrowser den Alternativtext an, wie in der folgenden Abbildung zu sehen ist:
Screenshot mit ALT-Attribut bei deaktivierter Grafikanzeige von spiegel.de
Suchmaschinen legen großen Wert auf die Qualität der ALT-Texte, da sie ihnen helfen, den Inhalt des Bildes und der Seite zu verstehen. Erst dadurch sind sie in der Lage Bild und Seiteninhalt korrekt zu kategorisieren. Darüber hinaus stufen sie barrierefreie und allgemein zugängliche Webseiten höher ein. Dementsprechend wichtig ist das Attribut aus SEO Sicht. Außerdem verbessern gute Alternativtexte das Ranking der Bilder in der Google Bildersuche. Vor allem Grafiken, die einen starken Bezug zum Seiteninhalt haben, sorgen für mehr Traffic, da sie zusätzliche Nutzer von der Bildersuche auf die eigentliche Webseite weiterleiten. Sind die Bilder besonders relevant für einen bestimmten Suchbegriff, werden diese unter Umständen sogar in den organischen Suchergebnissen angezeigt und bringen dadurch ebenfalls mehr Traffic auf die Website. Im Hinblick auf die Suchmaschinenoptimierung (SEO) ist das ALT-Attribut somit unverzichtbar.
Angabe der ALT-Attribute im HTML Code
ALT ist ein Pflicht-Attribut in HTML. Obwohl die meisten Browser fehlende ALT-Attribute ignorieren, sind sie für alle IMG-Tags einer standardkonformen Webseite vorgeschrieben. Daher muss der HTML Code für referenzierte Grafiken mindestens wie folgt aussehen:
<img src="bilddatei.jpg" alt="Alternativer Text"/>
Auch bei rein dekorativen Bildern wie Ziergrafiken, Hintergrundbildern, Linien oder Rahmen darf das Attribut nicht fehlen. Jedoch sollte der Alternativtext in diesem Fall leer bleiben, da das Bild keine inhaltliche Bedeutung hat:
<img src="hintergrund.jpg" alt=""/>
Sprachausgabesysteme und andere behindertengerechte Assistenzsoftware ignorieren derartige IMG-Tags.
Anforderungen an das ALT-Attribut
Der HTML-Standard schreibt vor, dass der Alternativtext ein angemessener und vollwertiger Ersatz für den grafischen Inhalt eines Bildes darstellen soll. Im Optimalfall enthalten ALT-Attribute daher weder ergänzende Inhalte wie Beifügungen oder Erläuterungen noch Titel oder Bildunterschriften. Sie sollen lediglich eine textliche Beschreibung der Bildinhalte liefern, sodass der Seiteninhalt auch ohne die Grafiken verständlich ist und noch den gleichen Informationsgehalt hat.
Diese Anforderungen stehen nicht im Widerspruch zu den Anforderungen an das ALT-Attribut im Hinblick auf die Suchmaschinenoptimierung (SEO). In gewisser Weise sind auch die Suchmaschinen blind für graphische Inhalte, sodass sie von ähnlichen ALT-Texten profitieren wie sehbehinderte Menschen. Ein guter Alternativtext ist für Blinde, Suchmaschinen und Nutzer mit abgeschalteter Grafikanzeige gleichermaßen nützlich.
Hinzu kommt, dass auch ein perfekt optimiertes ALT-Attribut nicht über mangelhaften Content hinwegtäuschen kann. Eine missbräuchliche Verwendung des Alternativtextes hilft daher für die SEO nicht weiter und kann -- im Falle von Keyword-Stuffing - sogar kontraproduktiv sein, da Google und Co. solche SEO Praktiken abstrafen.
Geeignete Alternativtexte für verschiedene Bildtypen
Der optimale Inhalt eines hochwertigen ALT-Textes hängt maßgeblich von Verwendungszweck und Inhalt des Bildes ab. Ein guter Ausgangspunkt ist die Frage, welcher Text anstelle des Bildes stünde, wenn es erst gar nicht vorhanden wäre. Des Weiteren hilft die Unterscheidung in folgende Bildtypen:
- Eigenständige Bilder: grafische Inhalte, die für sich selbst stehen. Zum Beispiel Fotos in Galerien und Alben, demonstrative Screenshots von Anwendungen, "Fun-Pictures", Bilder zum Herunterladen oder Kaufen und Ähnliches. Der Alternativtext liefert eine möglichst kurze, aber aussagekräftige Beschreibung des Bildes inklusive des wichtigsten Keywords für die Bildersuche.
- Bilder im Fließtext (Inline-Images): Diese Grafiken ersetzen aus ästhetischen oder platzsparenden Gründen einzelne oder wenige Wörter. Dazu zählen Smileys und Emoticons, Symbole und Icons sowie einfache Piktogramme. Das zugehörige ALT-Attribut enthält den Text, den das Bild ersetzt - beispielsweise "grinsender Smiley" oder schlicht "grins".
- Erläuterndes Bild: Graphen, Statistiken, erklärende Screenshots. Fasst die Grafik den umgebenden Text nur zusammen, ohne neue Informationen zu liefern, bleibt der ALT-Text leer. Andernfalls beinhaltet er eine Kurzfassung des Bildinhaltes. Für längere Erklärungen eignet sich der normale Fließtext besser, da er für alle Besucher nützlich ist.
- Dekorative Grafiken ohne Informationsgehalt: Hintergrundbilder, Rahmen, Linien und dergleichen. Da diese Bilder ausschließlich der visuellen Ästhetik dienen, werden sie mit leeren ALT-Attributen versehen.
Unterschied zum TITLE-Attribut
Unter Webdesignern besteht oft Unsicherheit was den Unterschied zwischen den Attributen ALT und TITLE betrifft. Während sich ALT nur auf das IMG-Tag anwenden lässt, ist TITLE ein Universalattribut, welches die meisten HTML Elemente unterstützen. Sein Zweck ist das Hinzufügen von Kommentaren, kurzen Erläuterungen oder zusätzlichen Informationen. Webbrowser zeigen den TITLE-Inhalt beim Überfahren mit der Maus als Tooltip an. Aufgrund der Bedeutung für Barrierefreiheit und Usability sind Alternativtexte für SEO wichtiger als der Bildtitel. Daher ist ALT eine Pflichtangabe, wohingegen TITLE nur sparsam und umsichtig zum Einsatz kommt.