Das Alt-Attribut – für SEO und Barrierefreiheit

17.05.2018

Alt-Attribut

Mit dem Alt-Attribut werden die Inhalte einer Grafik auf einer Website genauer bezeichnet. Es handelt sich dabei um nur wenige Textzeichen, deren Bedeutung jedoch oft unterschätzt wird. Denn das Alt-Attribut dient nicht nur der Barrierefreiheit, sondern ist auch als SEO-Faktor wichtig.

Was ist das Alt-Attribut?

Der Quelltext einer Website besteht aus HTML (Hypertext Markup Language). Mit dieser Auszeichnungssprache wird der Browser angewiesen, Textpassagen, Bilder, Videos und andere Elemente anzuzeigen. Alle Elemente, also auch Grafiken, können mit Zusatz-Informationen versehen werden, wie folgendes Beispiel zeigt:

<img src=”blume.jpg” alt=”Blume im Garten”>

Zur Erläuterung:

  • Die spitzen Klammern bezeichnen den Anfang und das Ende eines HTML-Elements.
  • Das konkrete Element ist hier ein Bild (img).
  • Angezeigt wird die Datei blume.jpg, diese wird mit dem Attribut src (für source = Quelle) ausgewiesen.
  • Das Attribut alt verweist auf einen Textinhalt (“Blume im Garten”).

Das Kurzwort alt steht für „Alternative”. Das Alt-Attribut sorgt zum Beispiel dafür, dass bei einem Ladefehler anstelle des nicht angezeigten Bildes ein Alternativtext erscheint. Warum werden Bilder nicht angezeigt? Die Gründe sind unterschiedlich:

  • Das Bild fehlt auf dem Server.
  • Veraltete Browser können manche Bildtypen nicht anzeigen.
  • Der Browser ist vom User bewusst so eingestellt worden, dass er Bilder nicht anzeigt.
  • Eine große Bilddatei erfordert eine lange Ladezeit – deshalb springen viele User vor der vollständigen Anzeige des Bildes ab.

Schließlich gibt es auch viele Menschen, die in ihrer Sehfähigkeit eingeschränkt sind. Für diese Usergruppe ist das Alt-Attribut sehr wichtig.

Alt-Attribute machen Bilder barrierefrei

Die Alternativtexte für visuelle Inhalte wie Texte und Bilder sind für sehbehinderte Menschen unverzichtbar. Ein Screenreader kann den Inhalt eines Bildes allein anhand der Datei nicht erfassen. Unter diesem Aspekt spielen Genauigkeit, Prägnanz und Verzicht auf Redundanz bei der Bildbeschreibung eine entscheidende Rolle. Sehr lange Texte sind also genauso überflüssig wie der Hinweis, dass es sich bei der Darstellung um ein Bild handelt (“Bild einer Blume”). Bei der Formulierung des Bildbeschreibungstexts ist es wichtig, dass dieser in den Gesamtkontext des Abschnitts passt, auf den sich das Bild bezieht.

Bei reinen Funktionsgrafiken (zum Beispiel einem Pfeil, der zur nächsten Seite führt) sollte sich der Text auch nur auf die Beschreibung der Funktion beschränken. Dann bietet es sich an, für das Alt-Attribut im <img>-Tag den gleichen Text wie für das Title-Attribut im <a>-Tag zu verwenden:

<a href=”seite2.html” title=”Nächste Seite”><img src=”pfeil.gif” alt=”Nächste Seite”></a>

Wenn ein Bild lediglich dekorativen Zwecken dient, sollte man trotzdem das Alt-Attribut setzen, dann aber mit einem leeren Inhalt:

<img src=”schwarz.gif” alt=””>

Auf diese Weise wird dem Benutzer eines Screenreaders sofort klargemacht, dass das Bild keinen inhaltlichen Zweck erfüllt. Der User wird nicht durch unnötige Angaben des Screenreaders aufgehalten.

Bei einem Bild, das gleichzeitig ein Link ist, sollte das Title-Attribut innerhalb von <img> nicht gesetzt werden. Hier reicht das Alt-Attribut. Das Title-Attribut gehört in das Anchor-Tag (<a>), das für die Verlinkung zuständig ist. Dieses Vorgehen bewirkt, dass das Ziel des Verweises als Tooltip in den meisten Browsern angezeigt wird. Das Title-Attribut innerhalb von <a> tritt bei einem Bild an die Stelle des Ankertextes bei einem Textlink.

Die praktische Bedeutung des Alt-Attributs

Die Wichtigkeit des Alt-Attributs wird oft unterschätzt – auch die Bedeutung des Alt-Attributs für SEO. Denn für die Robots der Suchmaschinen ist der Quelltext einer Website entscheidend. Ein Alt-Attribut liefert wichtige Hinweise zu dem Bild an sich, aber auch für den Gesamtkontext der Website.

Frühere Versionen des Internet Explorers zeigten den Inhalt des Alt-Attributs als Tooltip an – ein Effekt, für den eigentlich das Title-Attribut zuständig ist. Die Umgangsweise der Browser mit dem Alt-Attribut ist heute jedoch einheitlich. Programmierer und Designer richten sich deshalb nach folgender Faustregel:

  • Das Alt-Attribut beschreibt den Bildinhalt.
  • Das Title-Attribut kann für zusätzliche Informationen verwendet werden.

Im Zweifel sollte man auf das Title-Attribut bei Bildern verzichten und eine passende Bildunterschrift wählen. Für HTML5 – also die neueste HTML-Version – gibt es hierfür das Tag <figcaption>. Der Vorteil: Die Bildunterschrift wird auf jeden Fall angezeigt, sie wird auch von Screenreadern ausgelesen.

Alt-Attribute optimieren

Vorrangig als technische Hilfe und für Barrierefreiheit gedacht, ist das Attribut alt heute auch für SEO-Experten wichtig. Die Robots der Suchmaschinen orientieren sich am Quelltext einer Website – das gilt auch für die Bewertung einer Grafik. Deshalb spielt das Alt-Attribut für SEO eine große Rolle – nicht nur für die Bildersuche bei Google.

Bei der Optimierung von Alt-Attributen sollte man sich zunächst an der Google-Bildersuche orientieren. Eine möglichst umfassende, trotzdem knappe und verständliche Beschreibung des Bildinhalts verbessert hier das Ranking. Wenn das Haupt-Keyword sowohl in der URL, in der H1-Überschrift und in der Beschreibung des Bildes auftaucht, hat die Datei gute Chancen, in den ersten Ergebnissen der Google-Bildersuche zu erscheinen.

  • Wichtig: Auch die Dateigröße spielt bei der Bild-Optimierung eine Rolle. Große, hochauflösende Bilder sollten möglichst vermieden werden, um die Ladezeiten der Website gering zu halten. Wenn ein Bild nicht schnell genug lädt, ist die Absprungrate hoch. Die Absprungrate (Bounce Rate) ist ein entscheidender Ranking-Faktor.

Das Alt-Attribut ist Bestandteil einer ganzheitlichen Suchmaschinenoptimierung, wenn es darum geht, die Relevanz einer Website für ein bestimmtes Keyword zu erhöhen. Google bewertet Webseiten positiv, die ein Thema möglichst umfassend darstellen.

Fazit: Klein, aber oho

Das Alt-Attribut ist mehr als nur eine Pflichtangabe für Programmierer, die einen regelkonformen HTML-Text schreiben möchten. Der Alternativtext für ein Bild hilft Menschen, die im Internet auf einen Screenreader angewiesen sind. Aber auch für SEO-Zwecke ist die korrekte Alt-Auszeichnung einer Bilddatei wichtig. Sie hilft vor allem dabei, eine Website ausführlich zu gestalten und damit gute Positionen bei Google zu erreichen.