Der Alt-Text ist eine kurze Textbeschreibung eines Bildes, die im HTML-Code im Attribut alt hinterlegt wird und erscheint, wenn das Bild nicht angezeigt werden kann. Screenreader lesen ihn blinden und sehbehinderten Menschen vor, Suchmaschinen und KI-Systeme nutzen ihn, um zu verstehen, was das Bild zeigt. Ein guter Alt-Text beschreibt den Bildinhalt konkret in einem Satz, ohne Suchbegriffe aneinanderzureihen.
Was Alt-Text bedeutet
Alt steht für Alternative. Der Text ist die Alternative zum Bild für alle, die es nicht sehen können: Menschen, die einen Screenreader nutzen; Besucher, bei denen das Bild nicht lädt; und Programme wie Suchmaschinen und KI-Crawler, die Bilder nicht wie Menschen betrachten.
Im Code sieht das so aus: <img src="kueche-eiche.jpg" alt="Küche aus geölter Eiche mit schwarzer Arbeitsplatte in einem Altbau in Konstanz">. Der Satz hinter alt= ist der Alt-Text. Er ist für Besucher normalerweise unsichtbar, aber er wird vorgelesen, im Quelltext gelesen und bei Bildersuchen ausgewertet.
Gute und schlechte Beispiele für dasselbe Foto:
| Schlecht | Warum | Besser |
|---|---|---|
alt="Bild1" | Sagt nichts | alt="Einbauschrank unter einer Dachschräge, weiss lackiert" |
alt="Schreinerei Küche Thurgau Massivholz günstig" | Keywords statt Beschreibung | alt="Küche aus Massivholz, gefertigt von unserer Schreinerei in Weinfelden" |
alt="Foto von unserem Team" | Zu allgemein | alt="Vier Mitarbeitende der Schreinerei Keller vor der Werkstatt" |
Ein Beispiel aus dem KMU-Alltag
Eine Zahnarztpraxis in Wil lässt die Website prüfen. Von 60 Bildern haben 52 keinen Alt-Text, acht tragen den Dateinamen wie «IMG_4471.jpg». Eine sehbehinderte Patientin, die die Praxis anrufen wollte, hat den Termin bei einer anderen Praxis gebucht, weil ihr Screenreader auf der Seite nur «Bild, Bild, Bild» vorgelesen hat.
Die Praxis beschreibt jedes Bild in einem Satz: «Behandlungszimmer mit Blick auf den Wiler Stadtpark», «Dr. Müller erklärt einem Patienten die Röntgenaufnahme». Der Aufwand: zwei Stunden. Danach ist die Website für alle nutzbar, und einige Bilder erscheinen in der Google-Bildersuche für «Zahnarzt Wil».
Warum das für Ihr Unternehmen zählt
Barrierefreiheit ist der erste Grund. Ein erheblicher Teil der Bevölkerung ist auf Hilfsmittel angewiesen oder sieht schlecht; diese Menschen sind auch Kunden. Für öffentliche Stellen ist Barrierefreiheit in der Schweiz vorgeschrieben, für Unternehmen zunehmend erwartet.
Der zweite Grund ist Sichtbarkeit. Google versteht Bilder besser, wenn der Alt-Text beschreibt, was zu sehen ist, und KI-Systeme, die eine Seite auswerten, lesen Alt-Texte als Teil des Inhalts. Wie Dateiname, Grösse und Format dazukommen, erklärt die Seite zu Bilder-SEO.
Häufige Missverständnisse
Der Alt-Text ist nicht der Bildtitel und nicht die Bildunterschrift. Der Titel erscheint beim Darüberfahren mit der Maus, die Unterschrift steht sichtbar unter dem Bild. Nur das alt-Attribut wird vorgelesen. Und er ist kein Ort für Suchbegriffe: Wer dort Keywords stapelt, verschlechtert die Erfahrung für Screenreader-Nutzer und riskiert, dass Google den Text als Spam wertet.
Häufige Fragen
Braucht jedes Bild einen Alt-Text?
Jedes Bild braucht das Attribut, aber nicht jedes braucht Text. Rein dekorative Bilder wie Trennlinien oder Hintergrundmuster erhalten ein leeres Attribut (alt mit leerem Wert), damit Screenreader sie überspringen. Alle Bilder mit Informationsgehalt brauchen eine Beschreibung.
Wie lang darf ein Alt-Text sein?
Ein Satz, in der Regel unter 125 Zeichen, weil manche Screenreader längere Texte abschneiden. Was nicht hineinpasst, gehört in die Bildunterschrift oder den umgebenden Text. Bei komplexen Grafiken wie Diagrammen beschreibt der Alt-Text das Wesentliche und der Text daneben die Details.
Wo trage ich den Alt-Text ein?
In WordPress, Wix und Shopify gibt es beim Einfügen eines Bildes ein eigenes Feld dafür, meist «Alternativtext» genannt. Die Mediathek erlaubt das nachträgliche Bearbeiten. Prüfen Sie im Quelltext, ob der Text wirklich im alt-Attribut landet und nicht nur im Titel.