SEO & Discoverability

Ein pragmatischer Leitfaden für Alt-Text bei Bildern im Jahr 2026

Alt-Text ist keine Checkbox-Übung. So schreiben Sie Beschreibungen, die Menschen tatsächlich helfen, sich auf Ihrer Website zurechtzufinden.

The Wux Webtools Team The Wux Webtools Team 7 min lesen KI-unterstützt, menschlich überprüft
Person writing alt text in an image upload interface
Inhaltsverzeichnis
  1. Warum Alt-Text weiterhin wichtig ist
  2. Der Entscheidungsbaum: Braucht dieses Bild Alt-Text?
  3. Wie guter Alt-Text tatsächlich klingt
  4. Häufige Fehler, die allen Zeit kosten
  5. Tools und Workflows, die tatsächlich helfen
  6. Alt-Text und SEO im Jahr 2026
  7. Wichtigste Erkenntnisse
  8. FAQ
  9. Quellen

Warum Alt-Text weiterhin wichtig ist

Alt-Text ist seit 1995 Teil der HTML-Spezifikation. Dreißig Jahre später haben die meisten Bilder im Web immer noch entweder kein alt-Attribut oder einen Alt-Text, der klingt, als sei er von jemandem geschrieben worden, der noch nie einen Screenreader verwendet hat.

Das Problem ist heute nicht mehr mangelndes Bewusstsein. Die meisten Content-Management-Systeme machen das Alt-Feld inzwischen verpflichtend. Das Problem ist, dass Alt-Text zu einer Compliance-Checkbox geworden ist statt zu einem Kommunikationswerkzeug. Menschen schreiben „Bild einer lächelnden Person“, obwohl der eigentliche Kontext „CEO gibt die Ergebnisse für Q4 bekannt“ lautet.

Alt-Text existiert aus einem Grund: um den Zweck eines Bildes einer Person zu vermitteln, die es nicht sehen kann. Dieser Zweck ändert sich je nach Kontext. Ein Foto einer Kaffeetasse auf der Homepage eines Cafés erfüllt eine andere Funktion als dasselbe Foto in einem Blogbeitrag über Keramikglasurtechniken.

Im Jahr 2026 haben wir außerdem KI-Tools, die Alt-Text automatisch generieren können. Diese Tools werden besser, aber sie verstehen weiterhin keinen Kontext. Sie beschreiben, was sie sehen, nicht warum das Bild dort ist.

Der Entscheidungsbaum: Braucht dieses Bild Alt-Text?

Nicht jedes Bild braucht beschreibenden Alt-Text. Manche Bilder sind dekorativ. Manche sind redundant. Manche werden besser durch Bildunterschriften oder den umgebenden Text erklärt.

So sieht der Entscheidungsprozess aus:

Vermittelt das Bild Informationen, die im umgebenden Text nicht verfügbar sind? Wenn ja, braucht es Alt-Text. Wenn nein, ist es wahrscheinlich dekorativ.

Würde einem blinden Nutzer etwas Wichtiges fehlen, wenn dieses Bild verschwände? Wenn ja, schreiben Sie Alt-Text. Wenn nein, verwenden Sie ein leeres alt-Attribut (alt=""), um Screenreadern mitzuteilen, dass sie es überspringen sollen.

Ist das Bild ein Link oder Button? Der Alt-Text wird zum Linktext. Beschreiben Sie das Ziel, nicht das Bild. „Preispläne ansehen“ ist besser als „Pfeilsymbol“.

Ist das Bild komplex – ein Diagramm, eine Grafik oder eine Infografik? Alt-Text hat praktische Längenbegrenzungen (etwa 125 Zeichen sind für die meisten Screenreader angenehm). Komplexe Bilder brauchen längere Beschreibungen, entweder in einer Bildunterschrift, im Fließtext oder über aria-describedby.

Wie guter Alt-Text tatsächlich klingt

Guter Alt-Text ist spezifisch, prägnant und kontextbewusst. Er beantwortet die Frage: Warum ist dieses Bild hier?

Schlecht: „Bild eines Diagramms“

Besser: „Liniendiagramm zeigt 23 % Anstieg des mobilen Traffics von Januar bis März 2026“

Schlecht: „Eine Person benutzt einen Laptop“

Besser: „Designer prüft Website-Mockups in Figma“

Schlecht: „Hier klicken“

Besser: „Vollständige Checkliste für das Barrierefreiheits-Audit herunterladen (PDF)“

Beachten Sie, dass guter Alt-Text oft Zahlen, Handlungen oder Ergebnisse enthält. Er beschreibt nicht jedes visuelle Detail. Er beschreibt, was relevant ist.

Für dekorative Bilder – Hero-Hintergrundtexturen, ornamentale Rahmen, rein ästhetische Illustrationen – verwenden Sie alt="". Das ist keine Nachlässigkeit. Es ist semantische Ehrlichkeit. Screenreader überspringen das Bild vollständig, und genau das möchten Sie.

Häufige Fehler, die allen Zeit kosten

Mit „Bild von“ oder „Foto von“ beginnen: Screenreader kündigen bereits an, dass es sich um ein Bild handelt. Steigen Sie direkt in die Beschreibung ein.

Keyword-Stuffing für SEO: Alt-Text ist nicht der Ort, um „beste Bio-Kaffeebohnen Brooklyn handwerklich geröstet“ hineinzupressen. Google erkennt so etwas in der Bildersuche seit Jahren gut. Schreiben Sie für Menschen.

Den Dateinamen beschreiben: „IMG_3847.jpg“ hilft niemandem. „hero-banner-final-v3“ ebenso wenig.

Einen Roman schreiben: Wenn Ihr Alt-Text länger als zwei Sätze ist, gehört die Information wahrscheinlich eher in eine Bildunterschrift oder in den Fließtext.

Angrenzenden Text wiederholen: Wenn die Überschrift „Wie man Sauerteigbrot backt“ lautet und das Bild zeigt, wie jemand Teig formt, muss der Alt-Text die Überschrift nicht wiederholen. Beschreiben Sie, was visuell unterscheidbar ist: „Hände falten Sauerteigteig auf einer bemehlten Oberfläche.“

Tools und Workflows, die tatsächlich helfen

Die meisten modernen CMS haben inzwischen Alt-Text-Felder integriert. WordPress, Webflow, Contentful und Sanity zeigen das alt-Attribut beim Upload deutlich an. Dass das Feld sichtbar ist, bedeutet aber nicht, dass es gut ausgefüllt wird.

Wenn Sie eine Website auf fehlenden oder schlechten Alt-Text prüfen, können Browser-Erweiterungen wie Accessibility Insights oder axe DevTools Bilder ohne alt-Attribute markieren. Für eine schnelle manuelle Prüfung deaktivieren Sie Bilder in Ihrem Browser (Firefox und Chrome unterstützen das beide) und lesen Sie die Seite. Wenn der Alt-Text im Kontext sinnvoll ist, sind Sie auf einem guten Weg.

KI-generierter Alt-Text – verfügbar in Tools wie Azure Computer Vision, Google Cloud Vision oder integriert in Plattformen wie Cloudflare Images – kann ein sinnvoller Ausgangspunkt sein, besonders bei großen Bildbibliotheken. Behandeln Sie KI-Alt-Text aber wie einen ersten Entwurf. Er beschreibt den Inhalt des Bildes genau, weiß aber nicht, warum das Bild auf der Seite steht. Ein menschlicher Editor muss weiterhin Kontext ergänzen.

Wenn Sie an einer Website mit intensiver Bildnutzung arbeiten und Performance-Probleme früh erkennen möchten, können Tools wie Wux Webtools' Image Compressor helfen, Dateigrößen vor dem Upload zu optimieren – denn Alt-Text ist nur dann nützlich, wenn das Bild tatsächlich lädt.

Alt-Text und SEO im Jahr 2026

Google sagt seit Jahren, dass Alt-Text ein Rankingfaktor für die Bildersuche ist. Das stimmt weiterhin. Aber Optimierung für die Bildersuche ist nicht dasselbe wie Barrierefreiheit.

Wenn Sie Alt-Text vor allem für SEO schreiben, landen Sie bei keyword-überladenem Unsinn, der die Navigation für Screenreader-Nutzer erschwert. Wenn Sie Alt-Text zuerst für Barrierefreiheit schreiben, ergeben sich die SEO-Vorteile ganz natürlich, weil beschreibender, kontextbezogener Alt-Text genau das ist, was Googles Algorithmus für die Bildersuche sichtbar machen möchte.

Eine Nuance: Google Images nutzt umgebende Seiteninhalte heute deutlich stärker als früher. Wenn Ihr Alt-Text gut, aber allgemein ist („Schokoladenkuchen mit Glasur“) und Ihre Seite sich mit veganem Backen beschäftigt, versteht Google den Kontext. Sie müssen nicht „veganer Schokoladenkuchen mit milchfreier Glasur“ schreiben, es sei denn, dieser Unterschied ist im Bild visuell offensichtlich.

Wichtigste Erkenntnisse

  • Alt-Text existiert, um den Zweck eines Bildes zu vermitteln, nicht um jedes visuelle Detail zu beschreiben
  • Dekorative Bilder sollten alt="" verwenden, damit Screenreader sie vollständig überspringen
  • Guter Alt-Text ist spezifisch, kontextbewusst und beantwortet „warum ist dieses Bild hier?“
  • KI-generierter Alt-Text ist ein nützlicher Ausgangspunkt, braucht aber weiterhin menschliche Bearbeitung für den Kontext
  • Schreiben Sie zuerst für Barrierefreiheit; SEO-Vorteile ergeben sich natürlich aus klarem, beschreibendem Text

FAQ

F: Kann ich einfach KI verwenden, um meinen gesamten Alt-Text zu generieren?

A: KI-Tools sind gut darin, zu beschreiben, was in einem Bild zu sehen ist, aber sie verstehen keinen Kontext. Wenn Sie mit Hunderten von Produktbildern arbeiten und eine Grundlage brauchen, ist KI-Alt-Text in Ordnung. Bei redaktionellen Inhalten, Marketingseiten oder allem, bei dem der Grund für die Existenz des Bildes wichtig ist, muss ein Mensch prüfen und bearbeiten.

F: Wie lang sollte Alt-Text sein?

A: Die meisten Screenreader kommen mit 125 Zeichen oder weniger gut zurecht. Wenn Sie mehr brauchen, gehört die Information wahrscheinlich in eine Bildunterschrift, in den Fließtext oder in eine längere Beschreibung, die über aria-describedby verknüpft ist. Es gibt keine harte technische Grenze, aber längerer Alt-Text wird in der Navigation unhandlich.

F: Brauche ich Alt-Text für Logos?

A: Ja, aber halten Sie ihn schlicht. Wenn Ihr Logo im Header steht und zur Homepage verlinkt, sollte der Alt-Text Ihr Unternehmensname sein: alt="Acme Corp". Schreiben Sie nicht alt="Acme Corp logo", es sei denn, die Tatsache, dass es ein Logo ist, ist für den Kontext irgendwie relevant.

F: Was ist der Unterschied zwischen Alt-Text und einer Bildunterschrift?

A: Alt-Text ist ein direkter Ersatz für das Bild. Er wird von Screenreadern vorgelesen, wenn das Bild erreicht wird. Eine Bildunterschrift ist ergänzende Information, für alle sichtbar, die Kontext oder Zuschreibung hinzufügt. Wenn Sie beides haben, sollten sie sich nicht gegenseitig wiederholen.

F: Sollte ich Alt-Text zu Hintergrundbildern in CSS hinzufügen?

A: Nein. CSS-Hintergrundbilder sind per Definition dekorativ und werden Screenreadern nicht zugänglich gemacht. Wenn ein Hintergrundbild wichtige Informationen vermittelt, sollte es ein <img>-Element im HTML mit passendem Alt-Text sein.

Quellen

Decision tree for whether an image needs alt text, empty alt, link-focused alt, or a longer description for complex visuals
InfographicDoes this image need alt text? — A simple yes-or-no flow helps teams choose between descriptive alt, empty alt, or a longer text alternative
Side-by-side comparison of vague alt text and context-aware alternatives with specific examples and numbers
InfographicBad alt text vs better alt text — The strongest alt text explains why the image matters, not just what appears in it
Checklist of common alt text mistakes including image of, keyword stuffing, file names, overly long text, and repeated headings
InfographicAlt text mistakes to catch before publishing — Most bad alt text follows the same avoidable patterns, making it easy to review with a quick checklist

Häufig gestellte Fragen

Kann ich einfach KI verwenden, um meinen gesamten Alt-Text zu generieren?
KI-Tools sind gut darin, zu beschreiben, was in einem Bild zu sehen ist, aber sie verstehen keinen Kontext. Wenn Sie mit Hunderten von Produktbildern arbeiten und eine Grundlage brauchen, ist KI-Alt-Text in Ordnung. Bei redaktionellen Inhalten, Marketingseiten oder allem, bei dem der *Grund* für die Existenz des Bildes wichtig ist, muss ein Mensch prüfen und bearbeiten.
Wie lang sollte Alt-Text sein?
Die meisten Screenreader kommen mit 125 Zeichen oder weniger gut zurecht. Wenn Sie mehr brauchen, gehört die Information wahrscheinlich in eine Bildunterschrift, in den Fließtext oder in eine längere Beschreibung, die über `aria-describedby` verknüpft ist. Es gibt keine harte technische Grenze, aber längerer Alt-Text wird in der Navigation unhandlich.
Brauche ich Alt-Text für Logos?
Ja, aber halten Sie ihn schlicht. Wenn Ihr Logo im Header steht und zur Homepage verlinkt, sollte der Alt-Text Ihr Unternehmensname sein: `alt="Acme Corp"`. Schreiben Sie nicht `alt="Acme Corp logo"`, es sei denn, die Tatsache, dass es ein Logo ist, ist für den Kontext irgendwie relevant.
Was ist der Unterschied zwischen Alt-Text und einer Bildunterschrift?
Alt-Text ist ein direkter Ersatz für das Bild. Er wird von Screenreadern vorgelesen, wenn das Bild erreicht wird. Eine Bildunterschrift ist ergänzende Information, für alle sichtbar, die Kontext oder Zuschreibung hinzufügt. Wenn Sie beides haben, sollten sie sich nicht gegenseitig wiederholen.
Sollte ich Alt-Text zu Hintergrundbildern in CSS hinzufügen?
Nein. CSS-Hintergrundbilder sind per Definition dekorativ und werden Screenreadern nicht zugänglich gemacht. Wenn ein Hintergrundbild wichtige Informationen vermittelt, sollte es ein `<img>`-Element im HTML mit passendem Alt-Text sein.

Quellen & weiterführende Literatur

  1. W3C Web Accessibility Initiative: Images Tutorial
  2. WebAIM: Alternative Text
  3. Nielsen Norman Group: Alt Text for Images
  4. Google Search Central: Image SEO Best Practices
Über den Autor
The Wux Webtools Team

Zuletzt aktualisiert:

Weiterlesen