Alt-Text schreiben: der vollständige Leitfaden für SEO und Barrierefreiheit

Alt-Text ist ein HTML-Attribut an Bild-Tags und gehört zu den am häufigsten falsch eingesetzten Elementen im Web — mal bleibt er leer, mal steht ein nichtssagender Dateiname darin, mal ist er mit Schlagwörtern vollgestopft. Richtig gemacht, verbessert Alt-Text sowohl die Platzierung in Suchmaschinen als auch die Zugänglichkeit für sehbehinderte Menschen. Dieser Leitfaden erklärt, was Alt-Text ist, warum er zählt, wie man ihn gut schreibt, und zeigt ausführliche Vorher-nachher-Beispiele für jede wichtige Bildart.

Was ist Alt-Text?

Alt-Text ist das Attribut alt des HTML-Tags <img>:

<img src="laufschuhe.jpg" alt="Rote Nike Air Max 90 Laufschuhe, Seitenansicht, weiße Sohle">

Lädt ein Bild nicht — wegen eines toten Links, eines Netzwerkfehlers oder einer Einstellung, die Bilder blockiert —, erscheint der Alt-Text an seiner Stelle und sagt, was dort stehen sollte. Für sehbehinderte Menschen, die auf Screenreader angewiesen sind (NVDA, JAWS, Apple VoiceOver), liest das Programm den Alt-Text vor und vermittelt den Bildinhalt in Worten.

Die Doppelfunktion von Alt-Text

Funktion 1: Suchmaschinenoptimierung

Googles Crawler können Alt-Text unmittelbar lesen und daraus ableiten, was ein Bild zeigt. Google Vision AI kann Bildinhalte zwar visuell analysieren, doch der Alt-Text bleibt das klarste und verlässlichste Signal:

• Hilft Bildern, in der Google-Bildersuche zu passenden Suchbegriffen zu erscheinen
• Liefert der Seite zusätzlichen inhaltlichen Zusammenhang (natürlich eingebunden, nicht vollgestopft)
• Hilft Google, den Bezug zwischen Bild und umgebendem Inhalt zu verstehen
• Trägt zu den thematischen Relevanzsignalen der gesamten Seite bei

Funktion 2: Barrierefreiheit im Web

Nach Angaben der Weltgesundheitsorganisation leben weltweit rund 285 Millionen Menschen mit einer Sehbeeinträchtigung; viele von ihnen surfen mit Screenreadern. Bilder ohne Alt-Text sind für sie Leerstellen — der Screenreader sagt „bild.jpg“ oder überspringt das Element ganz und vermittelt nichts.

In vielen Ländern (etwa nach dem US-amerikanischen ADA oder der EU-Norm EN 301 549) ist Barrierefreiheit im Web gesetzlich vorgeschrieben. Ordentlicher Alt-Text ist ein Kernbestandteil der Erfüllung dieser Vorgaben.

Grundsätze für gutes Alt-Text-Schreiben

1. Beschreiben Sie, was wirklich im Bild ist: Schreiben Sie, was Sie sehen — nicht, wofür Sie gern ranken würden
2. Schlagwörter natürlich einbinden: Wenn ein Begriff den Bildinhalt tatsächlich beschreibt, gehört er hinein — er sollte sich aus der Beschreibung von selbst ergeben
3. Konkret, aber knapp: 5–15 Wörter decken die meisten Fälle ab; vermeiden Sie Aufsätze
4. Nicht mit „Bild von …“ oder „Foto von …“ beginnen: Suchmaschinen und Screenreader wissen bereits, dass es ein Bild ist
5. Keine Schlagwort-Anhäufung: alt="Laufschuhe Sportschuhe Joggingschuhe Sneaker Turnschuhe" ist Spam; Google kann es als solchen werten und die Seite abwerten
6. Den umgebenden Text nicht verdoppeln: Beschreibt der Text neben dem Bild es bereits vollständig, halten Sie den Alt-Text kürzer, damit Screenreader-Nutzer nichts doppelt hören

Guter und schlechter Alt-Text im direkten Vergleich

Fall 1: Produktbild (Laufschuhe)

• Schlecht: alt="" (leer)
• Schlecht: alt="img0023" (nichtssagender Dateiname)
• Schlecht: alt="Laufschuhe Sportschuhe Trainingsschuhe Sneaker" (Schlagwort-Anhäufung)
• Gut: alt="Nike Air Max 90 Laufschuhe in Karminrot, Herrenmodell, Seitenansicht"
• Gut: alt="Roter Nike Air Max 90 mit weißer Zwischensohle und Mesh-Obermaterial, Seitenprofil"

Fall 2: Rezeptbild (Schokoladen-Lavakuchen)

• Schlecht: alt="Dessert" (zu vage)
• Schlecht: alt="Kuchenfoto" (ohne Informationswert)
• Gut: alt="Aufgeschnittener Schokoladen-Lavakuchen mit flüssigem Schokoladenkern, serviert mit einer Kugel Vanilleeis"

Fall 3: Person / Porträt

• Schlecht: alt="Bild"
• Schlecht: alt="Foto der Geschäftsführung" (zu vage)
• Gut: alt="Firmengründerin Maria Chen, lächelndes Porträt im Büro"
• Hinweis: Stehen Name und Funktion bereits im Text daneben, vermeidet ein kürzerer Alt-Text Wiederholungen: alt="Porträt von Maria Chen"

Fall 4: Infografik

• Schlecht: alt="Infografik"
• Gut: alt="Weltweite Smartphone-Marktanteile 2024: Samsung 22 %, Apple 18 %, Xiaomi 12 %, übrige 48 %" (die Kernzahlen der Grafik aufnehmen)
• Noch besser: Stellen Sie die vollständigen Daten zusätzlich im Fließtext dar und fassen Sie im Alt-Text nur das Thema der Grafik zusammen. Screenreader eröffnen dann vollen Zugang zu den Informationen.

Fall 5: Rein dekorative Bilder

• Dekorative Elemente — Trennlinien, Hintergrundmuster, abstrakte Formen ohne Informationsgehalt — bekommen ein leeres Alt-Attribut: alt=""
• Hinweis: Das ist etwas anderes, als das Attribut ganz wegzulassen. Ein leeres alt weist Screenreader an, das Bild zu überspringen; ein fehlendes alt führt dazu, dass sie stattdessen den Dateinamen vorlesen.

Fall 6: Verlinkte Bilder (anklickbare Bilder)

• Dient ein Bild als Link, sollte der Alt-Text das Ziel des Links beschreiben — nicht das Bild
• Schlecht: alt="Logo" (wenn das Logo zur Startseite führt)
• Gut: alt="Zurück zur Startseite" oder alt="Startseite von [Markenname]"

Alt-Text-Beispiele nach Einsatzbereich

Onlinehandel:

• alt="Blauer 30-Liter-Wanderrucksack mit seitlicher Flaschentasche, Vorderansicht"
• alt="Mattschwarze 500-ml-Thermosflasche aus Edelstahl mit Strohhalmdeckel"

Blog und Nachrichten:

• alt="Nächtliche Skyline mit Taipeh 101, Stadtlichter spiegeln sich im Fluss"
• alt="Wissenschaftlerin bedient ein Mikroskop im Labor"

Unternehmenswebsite:

• alt="Empfangshalle des Firmensitzes im Taipeher Bezirk Xinyi, hohe Decken und viel Tageslicht"
• alt="Teamfoto der Firmenklausur 2024, rund 50 Mitarbeitende an einem Veranstaltungsort im Freien"

Symbole auf Leistungsseiten:

• alt="Symbol für Cloud-Speicher"
• alt="Symbol für Kundenbetreuung rund um die Uhr"
• (Rein dekorative Symbole können alt="" verwenden)

Empfohlene Länge für Alt-Text

• Einfache Bilder: 5–10 Wörter für das Hauptmotiv
• Komplexe Fotos: 10–20 Wörter für Motiv, Zusammenhang und wichtige Details
• Infografiken: dürfen länger sein, um Kernzahlen aufzunehmen; über 150 Zeichen gehört der Inhalt aber besser in den Fließtext — der Alt-Text fasst dann nur zusammen
• Screenreader kürzen Alt-Text meist bei etwa 150 Zeichen; planen Sie mit dieser Grenze

Häufige Fragen

F: Braucht wirklich jedes Bild einen Alt-Text?
A: Jedes Bild mit inhaltlicher Bedeutung braucht einen beschreibenden Alt-Text. Rein dekorative Bilder sollten ein leeres alt="" bekommen, damit Screenreader sie überspringen.

F: Wenn dasselbe Bild auf mehreren Seiten steht — muss der Alt-Text identisch sein?
A: Nicht zwingend. Alt-Text sollte im Zusammenhang der jeweiligen Seite geschrieben werden. Dasselbe Bild kann auf verschiedenen Seiten verschiedene Rollen spielen, und der Alt-Text darf das abbilden.

F: Mein CMS (etwa WordPress) hat sowohl ein Feld „Alt-Text“ als auch „Bildunterschrift“ — was ist der Unterschied?
A: Der Alt-Text ist ein HTML-Attribut, das Screenreader und Suchmaschinen sehen, gewöhnliche Besucher aber nicht. Die Bildunterschrift erscheint für alle sichtbar unter dem Bild. Beide erfüllen verschiedene Zwecke und sollten beide sorgfältig ausgefüllt werden.

Fazit

Alt-Text ist ein kleines HTML-Attribut mit großer Verantwortung: Er hilft Suchmaschinen, Bilder zu verstehen, eröffnet sehbehinderten Menschen Zugang zu Ihren Inhalten und liefert eine Ersatzinformation, wenn Bilder nicht laden. Guter Alt-Text ist ehrlich und knapp — eine getreue Beschreibung dessen, was im Bild zu sehen ist, mit Schlagwörtern nur dort, wo sie natürlich hingehören. Sich anzugewöhnen, für jedes bedeutungstragende Bild einen durchdachten Alt-Text zu schreiben, gehört bei SEO und Barrierefreiheit zu den Maßnahmen mit dem besten Verhältnis von Aufwand und Wirkung.