So fügen Sie einen Bild-Alt-Text (Alt-Text) hinzu

Was ist ein Alt-Text?

Der Alt-Text (Alt-Attribut) ist ein Attribut, das einem <img>-Tag hinzugefügt wird und den Inhalt des Bildes in Worten beschreibt: <img src="..." alt="...">. Kann das Bild nicht geladen werden (langsame Verbindung, fehlerhafter Dateipfad), wird der Alt-Text stattdessen im Browser angezeigt; außerdem wird er von Screenreadern für sehbehinderte Nutzer vorgelesen und ermöglicht es Suchmaschinen zu verstehen, was das Bild darstellt, da Google das Bild nicht auf Pixelebene „sieht“, sondern sich meist auf den umgebenden Text und das alt-Attribut verlässt.

Der Alt-Text dient einem völlig anderen Zweck als der Dateiname des Bildes (z. B. IMG_2031.jpg): Der Dateiname ist für den Server bzw. das Dateisystem bestimmt, der Alt-Text hingegen dient der Vermittlung von Bedeutung. Beide sollten nicht verwechselt werden.

Auch der Alt-Text und eine Bildunterschrift (Caption), die unter dem Bild erscheint, sind zwei verschiedene Dinge: Die Bildunterschrift ist ein für alle auf der Seite sichtbarer Text, während der Alt-Text unter normalen Umständen nicht sichtbar ist und nur dann zum Tragen kommt, wenn das Bild nicht geladen werden kann oder von einem Screenreader abgerufen wird. Diese Unterscheidung wird häufig verwechselt.

Auch wenn das „alt“-Attribut in manchen Entwicklungsumgebungen leer gelassen werden kann und dennoch die HTML-Validierung besteht, bedeutet diese technische Gültigkeit nicht, dass der Alt-Text tatsächlich aussagekräftig ist; das Validierungstool prüft lediglich, ob das Attribut vorhanden ist, nicht jedoch die Qualität seines Inhalts.

Warum ist das wichtig?

Der Alt-Text ist sowohl für die Barrierefreiheit als auch für die visuelle Suchmaschinenoptimierung (SEO) von entscheidender Bedeutung. Sehbehinderte Nutzer erfahren den Inhalt eines Bildes über den Alt-Text, während sie mit einer Screenreader-Software durch die Seite navigieren; fehlt dieser Text, liest der Screenreader in der Regel nur „Bild“ oder den Dateinamen vor, was zu Informationsverlust führt. In einigen Ländern kann Barrierefreiheit sogar gesetzlich vorgeschrieben sein.

Da Suchmaschinen den Inhalt von Bildern nicht direkt „sehen“ können, ordnen sie die Seite in den Bildersuchergebnissen (Google Bilder) anhand des Alt-Textes ein. Das Hinzufügen korrekter Alt-Texte zu Produktbildern auf E-Commerce-Websites kann den zusätzlichen Traffic über Google Bilder steigern. Fehlende Alt-Texte wirken sich sowohl auf die Benutzererfahrung als auch auf den Traffic aus der Bildersuche negativ aus.

Wenn ein Bild bei einer langsamen Verbindung erst spät oder gar nicht geladen wird, ist der Alt-Text die einzige Informationsquelle, die dem Nutzer vermittelt, was er an dieser Stelle erwarten kann; dies macht den Alt-Text nicht nur für die Suchmaschinenoptimierung (SEO), sondern auch für die allgemeine Barrierefreiheit wichtig.

Wie lässt sich das beheben?

Verfassen Sie für jedes aussagekräftige Bild einen kurzen, beschreibenden Alt-Text.
Verwenden Sie bei Bildern, die ausschließlich dekorativen Zwecken dienen (z. B. Hintergrundbilder), alt="" sollte der Screenreader das Bild überspringen; dies ist etwas anderes, als das „alt“-Attribut gar nicht erst hinzuzufügen.
Verwenden Sie das Schlüsselwort nur, wenn es das Bild tatsächlich beschreibt, und setzen Sie es auf natürliche Weise ein.
Halten Sie den Alt-Text kurz und prägnant; vermeiden Sie unnötig lange Sätze – in der Regel reichen ein paar Wörter aus.
Geben Sie bei Produktbildern den Produktnamen und wichtige Merkmale an (z. B. Farbe, Modell, Blickwinkel).
Wenn Sie in Ihrem Content-Management-System einen Massen-Upload durchführen, erstellen Sie den Alt-Text möglichst manuell oder zumindest anhand einer sinnvollen Vorlage auf Basis des Produktnamens, anstatt ihn automatisch ausfüllen zu lassen.
Bei komplexen Bildern wie Infografiken oder Tabellen sollten Sie erwägen, Details, die nicht in den Bildtext passen, direkt unter dem Bild als Klartext darzustellen.

Beispiel

<img src="rote-sportschuhe.jpg" alt="Rote Herren-Sneaker, Seitenansicht">

Schlechtes Beispiel: <img src="IMG_2031.jpg" alt="Bild"> — Weder der Dateiname noch der Alt-Text geben Auskunft über den Inhalt des Bildes. Ein weiteres schlechtes Beispiel: alt="Schuhe Schuhe Sportschuhe günstige Schuhe Schuhe im Angebot kaufen" — Dies dient nicht der Beschreibung eines einzelnen Bildes, sondern dem Auffüllen mit Schlüsselwörtern und schafft für Screenreader-Nutzer eine sinnlose, langweilige Erfahrung.

Häufige Fehler

Das „alt“-Attribut komplett leer lassen (bei nicht-dekorativen Bildern).
Die Verwendung bedeutungsloser Dateinamen wie „bild1.jpg“ oder „IMG_2023“ als Alt-Text.
Den Alt-Text mit einer Aneinanderreihung vieler Schlüsselwörter füllen (z. B. „Schuhe, Sportschuhe, günstige Schuhe, Schuhe im Angebot“).
Bei allen Bildern denselben allgemeinen Alt-Text zu wiederholen.
Der Bericht von Seoraporu.co listet jeden fehlenden Alt-Text einzeln auf; bei großen Websites handelt es sich dabei in der Regel um ein Problem, das in der Produkt-/Bildverwaltungsvorlage gesammelt behoben werden muss.