Alt-Text: So schreiben Sie gute Alternativtexte für Bilder

Ein Bild sagt mehr als tausend Worte, aber nur, wenn man es sehen kann. Für blinde Menschen, bei einer schwachen Mobilfunkverbindung oder für Suchmaschinen bleibt ein Bild ohne Beschreibung eine Lücke. Der Alt-Text schließt sie. Was Alternativtexte sind, wie Sie gute schreiben, wann ein Bild bewusst keinen Text bekommt und wie Sie Alt-Texte in WordPress und Webflow hinterlegen, erklären wir Schritt für Schritt.

Was ist ein Alt-Text?

Ein Alt-Text, kurz für Alternativtext, ist eine kurze textliche Alternative zu einem Bild, die im HTML-Code hinterlegt wird. Technisch ist er ein Attribut des Bild-Elements:

<img src="dachsanierung.webp" alt="Dachdecker verlegt neue Tonziegel auf einem Satteldach" width="1200" height="800">

Besucher sehen den Text normalerweise nicht. Er wird erst wichtig, wenn das Bild selbst nicht wahrgenommen werden kann. Oft ist auch von „Alt-Tag“ die Rede. Das ist streng genommen falsch, denn alt ist kein eigenes Tag, sondern ein Attribut des img-Tags. Gemeint ist aber dasselbe.

Alternativtexte sind eine der ältesten Anforderungen an barrierefreie Websites. In den WCAG steht die Pflicht zu Textalternativen gleich im ersten Erfolgskriterium, 1.1.1 Nicht-Text-Inhalt, auf der grundlegenden Stufe A. Mehr zu den Richtlinien lesen Sie im Artikel über die WCAG.

Wofür Alt-Texte gebraucht werden

Screenreader und Braillezeilen

Blinde und stark sehbehinderte Menschen nutzen Screenreader, die den Inhalt einer Seite vorlesen oder auf einer Braillezeile in Punktschrift ausgeben. Trifft der Screenreader auf ein Bild, kündigt er es als „Grafik“ oder „Bild“ an und liest den Alternativtext vor. Fehlt das alt-Attribut ganz, lesen viele Screenreader je nach Einstellung ersatzweise den Dateinamen vor, also etwa „IMG unterstrich 4711 Punkt jpg“, oder überspringen das Bild. Beides hilft niemandem.

Wenn das Bild nicht lädt

Bei schlechter Verbindung, blockierten Bildern oder einem falschen Dateipfad zeigt der Browser an der Stelle des Bildes den Alt-Text an. So wissen Besucher trotzdem, was dort zu sehen wäre.

Suchmaschinen

Google nutzt laut eigener Dokumentation den Alternativtext zusammen mit dem Inhalt der Seite und eigener Bildanalyse, um zu verstehen, was ein Bild zeigt. Das hilft Ihren Bildern in der Google-Bildersuche. Bei verlinkten Bildern übernimmt der Alt-Text außerdem die Rolle des Linktextes. Gute Alt-Texte gehören damit auch zur Suchmaschinenoptimierung, mehr dazu im Artikel WordPress-SEO. Der wichtigste Zweck bleibt aber die Barrierefreiheit: Wer für Menschen schreibt, schreibt meist auch für Suchmaschinen gut.

So schreiben Sie gute Alt-Texte

Ein guter Alternativtext übernimmt die Aufgabe, die das Bild an dieser Stelle hat. Stellen Sie sich vor, Sie beschreiben die Seite jemandem am Telefon: Was muss die Person über das Bild wissen, um den Inhalt zu verstehen? Diese Regeln helfen dabei:

• Zweck vor Beschreibung: Beschreiben Sie, was für den Zusammenhang wichtig ist, nicht jedes sichtbare Detail.
• Das Wichtigste zuerst: Screenreader lesen den Text am Stück vor. Die Kernaussage gehört an den Anfang.
• Kurz und konkret: Formulieren Sie möglichst knapp. Meist reicht ein kurzer Satz oder eine Wortgruppe.
• Kein „Bild von“ oder „Foto zeigt“: Der Screenreader sagt ohnehin an, dass es sich um eine Grafik handelt.
• Text im Bild übernehmen: Steht im Bild ein Schriftzug, gehört er wörtlich in den Alt-Text.
• Nichts doppeln: Was bereits in der Bildunterschrift oder direkt daneben steht, muss nicht noch einmal in den Alt-Text.
• Keine Dateinamen, Copyright-Hinweise oder Keyword-Listen: Sie gehören nicht in die Beschreibung.
• Satzzeichen nutzen: Nach einem Punkt am Ende machen viele Screenreader eine kurze Pause, bevor es weitergeht.

Wie lang darf ein Alt-Text sein?

Eine feste Zeichengrenze gibt es in den WCAG nicht. Die Faustregel lautet: so kurz wie möglich, so lang wie nötig. Für die meisten Bilder genügt ein Satz, als Orientierung gelten etwa 100 bis 150 Zeichen. Manche Prüfwerkzeuge oder Plattformen setzen eigene Grenzen, das sind aber keine Vorgaben der Barrierefreiheit. Braucht ein Bild deutlich mehr Erklärung, etwa ein Diagramm, gehört die ausführliche Beschreibung in den sichtbaren Text daneben. Ein Alt-Text fasst also knapp zusammen, was an dieser Stelle zählt. Mit den vollständigen Bildbeschreibungen, die etwa Museen für blinde Besucher anbieten, hat er wenig gemein.

Ein Bild, drei Alt-Texte je nach Zweck

Derselbe Alt-Text passt nicht überall. Es kommt darauf an, wozu ein Bild auf der jeweiligen Seite dient. Nehmen wir ein Foto, auf dem ein Monteur eine Wärmepumpe an einer Hauswand anschließt. Das Gerät trägt eine Schallschutzhaube, im Hintergrund steht ein Transporter mit Firmenlogo.

Hier liegt auch der Grund, warum automatisch erzeugte Beschreibungen selten genügen: Eine Software sieht das Bild, kennt aber den Zweck nicht.

Dekorative Bilder bleiben bewusst ohne Text

Nicht jedes Bild braucht eine Beschreibung. Ein Bild ist dekorativ, wenn beim Weglassen keine Information verloren geht: Hintergrundmuster, Trennlinien, Schmuckgrafiken oder ein Stimmungsbild neben einem Text, der schon alles sagt. Solche Bilder bekommen ein leeres alt-Attribut:

<img src="welle.svg" alt="">

Der Unterschied ist wichtig: Ein leeres alt="" ohne Leerzeichen ist eine bewusste Aussage. Screenreader überspringen das Bild. Ein fehlendes alt-Attribut ist dagegen ein Fehler, und das Bild wird mit Dateinamen angesagt. Manche Prüfwerkzeuge melden leere Alt-Texte als Warnung. Bei rein dekorativen Bildern ist das ein Fehlalarm.

Rein schmückende Grafiken können Sie auch per CSS als Hintergrundbild einbinden. Dann tauchen sie für Hilfsmittel gar nicht erst auf. Umgekehrt gilt: Ein Bild mit Information darf nie nur als CSS-Hintergrund eingebunden werden, weil es dort keinen Alt-Text haben kann.

Im Zweifel hilft der Entscheidungsbaum der Web Accessibility Initiative des W3C, den Sie im englischen Tutorial zu Bildern finden. Er führt mit wenigen Fragen zur richtigen Lösung.

Sonderfälle: Logos, Diagramme, Text und Links

Logos

Das Logo bekommt den Namen des Unternehmens als Alt-Text, nicht „Logo“. Ist es wie üblich mit der Startseite verlinkt, beschreibt der Text das Ziel, zum Beispiel „Tischlerei Muster, zur Startseite“.

Diagramme und Infografiken

Komplexe Grafiken lassen sich nicht in einem Satz beschreiben. Nennen Sie im Alt-Text Art, Thema und Kernaussage, etwa „Balkendiagramm: Anfragen pro Quartal 2025, deutlicher Anstieg im zweiten Halbjahr“. Die Details gehören als Text oder Datentabelle direkt unter das Diagramm. Davon profitieren alle Besucher.

Bilder mit Text

Enthält ein Bild einen Schriftzug, etwa ein Aktionsbanner, übernehmen Sie den Text wörtlich: „Tag der offenen Tür am Samstag, 10 bis 16 Uhr“. Besser ist echter Text über oder neben dem Bild. Der bleibt auf dem Smartphone lesbar, lässt sich vergrößern und von Suchmaschinen erfassen. Warum das für kleine Bildschirme so wichtig ist, erklärt der Artikel über responsive Webdesign.

Verlinkte Bilder und Icons

Ist ein Bild ein Link oder Button, beschreibt der Alt-Text die Funktion, nicht das Motiv. Die Lupe im Suchfeld heißt „Suchen“, nicht „Lupe“. Das Bild einer Broschüre, das zum Download führt, heißt „Produktkatalog 2026 herunterladen (PDF)“. Steht neben dem Bild derselbe Linktext, fassen Sie beides in einem Link zusammen und geben dem Bild alt="". Sonst wird die Information doppelt vorgelesen.

Personen und Produkte

Bei Fotos von Menschen nennen Sie Namen und Rolle, wenn sie für den Inhalt wichtig sind, etwa auf einer Teamseite. Mutmaßungen über Alter oder Herkunft gehören nicht in den Text. Bei mehreren Produktfotos unterscheiden Sie die Ansichten, etwa „von vorn“, „Rückseite mit Anschlüssen“ oder „im Einsatz in der Küche“.

Schlechte und gute Alt-Texte im Vergleich

Alt-Texte in WordPress und Webflow hinterlegen

WordPress

1. In der Mediathek

   Öffnen Sie die Mediathek, klicken Sie auf das Bild und tragen Sie die Beschreibung in das Feld „Alternativer Text“ ein. Dieser Text dient als Vorgabe für die Website.

2. Im Block-Editor

   Wählen Sie im Beitrag den Bild-Block aus. In der Seitenleiste finden Sie das Feld „Alternativer Text“, in dem Sie die Beschreibung für genau diese Stelle anpassen können.

3. Nachträgliche Änderungen prüfen

   Beim Einfügen übernimmt der Bild-Block den Text aus der Mediathek. Ändern Sie ihn später in der Mediathek, bleiben bereits eingefügte Bilder in Beiträgen unverändert. Passen Sie sie im Block selbst an.

4. Dekorative Bilder

   Lassen Sie das Feld leer. WordPress gibt dann ein leeres alt-Attribut aus.

Beitragsbilder und Bilder, die das Theme ausgibt, nutzen in der Regel den Text aus der Mediathek. Prüfen Sie bei Page-Buildern und Slider-Plugins, ob der Alt-Text tatsächlich im Code ankommt. Bei eigenen Themes ohne Page-Builder, wie wir sie als WordPress-Agentur entwickeln, lässt sich die Ausgabe der Alt-Texte gezielt steuern.

Webflow

In Webflow pflegen Sie Alt-Texte an zwei Stellen. In den Einstellungen eines Bildes im Asset-Bereich legen Sie eine Standardbeschreibung fest. Ob diese Standardbeschreibung genutzt wird, ob das Bild an dieser Stelle einen eigenen Text bekommt oder ob es als dekorativ markiert wird, bestimmen Sie in den Einstellungen des einzelnen Bildelements. Bei Bildern aus dem CMS sollten Sie für jeden Eintrag eine eigene Beschreibung vorsehen, etwa über ein Textfeld in der Collection, das mit dem Bild verknüpft wird. Mehr über das System lesen Sie im Artikel Was ist Webflow?

KI-Generatoren für Alt-Texte kritisch einordnen

Viele Werkzeuge versprechen, Alt-Texte per künstlicher Intelligenz automatisch zu erzeugen. Auch soziale Netzwerke wie Facebook und Instagram legen automatisch Beschreibungen an, wenn Sie keine eigene hinterlegen. Das kann eine Hilfe sein, vor allem bei vielen alten Bildern ohne jede Beschreibung. Die Grenzen sollten Sie aber kennen:

• Kein Kontext: Die KI beschreibt, was sie sieht, weiß aber nicht, wozu das Bild auf Ihrer Seite dient.
• Fehler bei Details: Anzahlen, Beschriftungen, Diagrammwerte und kleine Schriftzüge werden häufig falsch wiedergegeben oder erfunden.
• Unbekannte Namen: Wer auf dem Foto zu sehen ist oder welches Produkt genau, kann die Software nicht wissen.
• Floskeln: Automatische Texte beginnen oft mit „Ein Bild von“ und beschreiben Nebensächliches ausführlich.
• Datenweitergabe: Wer Bilder in externe Dienste hochlädt, gibt sie aus der Hand. Klären Sie mit Ihrem Datenschutzbeauftragten, welche Dienste Sie nutzen dürfen, besonders bei Fotos von Personen.

Ein sinnvoller Ablauf: Die KI liefert einen Vorschlag, ein Mensch prüft Richtigkeit und Zweck, kürzt und ergänzt Namen oder Kontext. Mit ungeprüft übernommenen Texten ist oft wenig gewonnen.

Alt-Texte auf Ihrer Website prüfen

• WAVE oder axe: Die Browser-Erweiterungen zeigen fehlende Alternativtexte direkt am Bild.
• Lighthouse: Der Barrierefreiheitsbericht in Chrome listet Bilder ohne alt-Attribut auf.
• Crawler: SEO-Crawler finden fehlende Alt-Texte auf allen Unterseiten auf einmal.
• Screenreader: Hören Sie sich wichtige Seiten mit NVDA oder VoiceOver an. Nur so merken Sie, ob die Texte verständlich sind.
• Redaktion schulen: Neue Bilder bringen neue Lücken. Machen Sie das Feld für den Alternativtext zum festen Schritt beim Hochladen.

Unterstützung für barrierearme Inhalte

Häufige Fragen