Ein Alt-Text ist die kurze, im HTML-Code hinterlegte Beschreibung eines Bildes, die Suchmaschinen und Screenreadern mitteilt, was auf dem Bild zu sehen ist und warum es an dieser Stelle steht. Er entscheidet darüber, ob dein Bild in der Google-Bildersuche gefunden wird, ob Menschen mit Sehbehinderung erfahren, was du zeigst, und zunehmend auch darüber, ob KI-Suchmaschinen wie ChatGPT oder Perplexity deine Inhalte überhaupt verstehen und zitieren können.
In diesem Leitfaden bekommst du keine generische “5 Tipps für bessere Alt-Texte”-Liste, sondern ein Entscheidungsframework, mit dem du für jedes Bild in Sekunden weißt, was reingehört, echte Vorher-Nachher-Beispiele aus acht Branchen, eine ehrliche Einordnung, wo KI-Generatoren an ihre Grenzen stoßen, und einen Workflow, mit dem du eine ganze Website systematisch prüfst.
Was ist ein Alt-Text?
Alt-Text, kurz für “alternative text”, ist der Inhalt des alt-Attributs im <img>-Tag. Er hat zwei Aufgaben gleichzeitig: Er beschreibt einem Screenreader-Nutzer, was auf dem Bild passiert, und er gibt Suchmaschinen-Crawlern ein textliches Signal, worum es in einem Bild geht, das sie selbst nicht “sehen” können.
Warum Alt-Text 2026 wichtiger ist als je zuvor
Alt-Text ist kein neues Thema, aber die Gründe, warum er zählt, haben sich verschoben:
- SEO-Signal statt Rankingfaktor: Google bestätigt seit Jahren, dass Alt-Text kein direkter Rankingfaktor ist, aber ein wichtiges Kontextsignal für die Bildersuche und für das inhaltliche Verständnis der ganzen Seite bleibt. Wie Google-Rankings insgesamt zustande kommen, erklären wir in Google-Ranking verbessern.
- Barrierefreiheit ist Pflicht, nicht Kür: Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Angebote. Wie sich das konkret auf mehrsprachige Shopify-Shops auswirkt, erklären wir ausführlich in Shopify ALT-Texte übersetzen.
- KI-Suchmaschinen lesen mit: ChatGPT, Perplexity und Google AI Overviews crawlen und verarbeiten zunehmend auch Bildbeschreibungen, um Inhalte einzuordnen und zu zitieren. Wie du deinen gesamten Shop für diese neue Suchrealität aufstellst, liest du in GEO vs. SEO.
Die wichtigste Frage zuerst: Welcher Bildtyp ist es?
Bevor du überhaupt anfängst zu formulieren, beantworte eine Frage: Was für ein Bild ist das? Davon hängt die komplette Strategie ab, das ist der Punkt, an dem die meisten Alt-Text-Ratgeber zu kurz greifen.
| Bildtyp | Beispiel | Alt-Text-Strategie |
|---|---|---|
| Dekorativ | Trennlinie, Hintergrundmuster, reines Layout-Element | Leeres Alt-Attribut (alt=""), Screenreader überspringt das Bild |
| Informativ | Produktfoto, Teamfoto, redaktionelles Bild | Motiv und relevante Details in einem Satz beschreiben |
| Funktional | Verlinktes Icon, Button-Grafik, Logo als Link | Aktion oder Ziel beschreiben, nicht das Bild selbst |
| Komplex | Diagramm, Infografik, Screenshot | Kurzer Alt-Text plus ausführliche Erklärung im umgebenden Text |
Probiere es direkt an einem eigenen Bild aus:
Welcher Alt-Text-Typ ist dein Bild?
Beantworte 3 kurze Fragen und erhalte die passende Alt-Text-Strategie für dein Bild.
* Orientiert an WCAG 2.2, Erfolgskriterium 1.1.1 (Non-text Content). Im Zweifel hilft immer der Blick auf die konkrete Seite und ihren Kontext.
Komplexe Bilder: Diagramme und Infografiken
Bei Diagrammen reicht ein kurzer Alt-Text als Kurzfassung nicht aus, die eigentliche Information gehört zusätzlich in den Fließtext. So bringt es Hakan Calim aus dem RRZE FAU im Interview auf den Punkt:
Diagramme sollten im Haupttext beschrieben werden. Wenn nicht, dann sollten diese Informationen im Alternativ-Text auch stehen.
Praktisch heißt das: Ein Säulendiagramm bekommt einen kurzen Alt-Text wie “Säulendiagramm: Besucherzahlen 2023 bis 2025”, die konkreten Werte (zum Beispiel “12.000 im Jahr 2023, 28.000 im Jahr 2025”) stehen zusätzlich als Text oder Tabelle direkt neben dem Bild.
Sonderfall: Hintergrundbilder (CSS background-image)
Bilder, die per CSS als background-image eingebunden sind, haben kein natives Alt-Attribut, Screenreader ignorieren sie komplett. Trägt so ein Hintergrundbild wichtige Informationen (zum Beispiel ein Zitat, das nur im Bild steht), brauchst du eine Alternative: ein aria-label auf dem umgebenden Element oder einen visuell versteckten, aber für Screenreader lesbaren Text. Rein dekorative Hintergrundbilder brauchst du dagegen gar nicht extra zu behandeln.
Wie lang sollte ein Alt-Text sein? Was Screenreader wirklich tun
Hier widersprechen sich viele Ratgeber: Manche empfehlen 60 bis 90 Zeichen, andere 80 bis 100, wieder andere 100 bis 125. Die Wahrheit ist unbequemer: Screenreader brechen Alt-Texte nicht bei einer festen Zeichenzahl ab, sie lesen den Text vollständig vor. Die eigentliche Grenze ist die Aufmerksamkeitsspanne der zuhörenden Person, nicht ein Zeichenlimit.
Die Beschreibung sollte so kurz wie möglich, aber so lange wie nötig sein.
Praktisch bedeutet das: Statt einer Universalzahl brauchst du ein Längen-Gefühl je Bildtyp.
-
Einfaches Produktfoto: ein Satz, meist 60 bis 100 Zeichen
-
Bild mit mehreren relevanten Details (Farbe, Material, Kontext): ein bis zwei Sätze
-
Screenshots: exakte Button-Beschriftungen und Position nennen. Für Screenreader-Nutzer ist bei Screenshots oft nur eine Information wirklich entscheidend, wie Nutzerin Lara Reiser es im selben Interview beschreibt:
Die einzige Information, die in dem Kontext für mich wichtig ist, ist wirklich, wo ich da genau draufklicken soll.
-
Portraits: Mimik, Kleidung, ungefähres Alter und Setting einbeziehen, wenn es für den Kontext relevant ist
Die Formel für einen exzellenten Alt-Text
Für informative Bilder funktioniert diese Struktur zuverlässig: Objekt + relevante Details + Kontext. Ein guter Test danach: Lies den Satz mit dem Alt-Text laut vor und prüfe, ob er sich redundant zum umgebenden Text anfühlt. Wenn ja, kürze ihn.
- Vermeide “Bild von…” oder “Foto zeigt…”, das ist bereits durch das Alt-Attribut selbst klar
- Baue dein Hauptkeyword natürlich ein, aber nur eines pro Bild, nicht mehrere Varianten aneinandergereiht
- Passe den Alt-Text an den Einsatzort an: Dasselbe Produktfoto braucht auf der Produktseite einen anderen Alt-Text als in einem Blogartikel über Materialherkunft
Praxisbeispiele nach Branche: Vorher und nachher
Alt-Texte richtig zu schreiben sieht in jeder Branche etwas anders aus. Hier acht reale Anwendungsfälle:
| Branche | Schlechter Alt-Text | Guter Alt-Text |
|---|---|---|
| Mode | ”Pullover" | "Damenpullover in grauer Strickoptik mit Rollkragen und Zopfmuster” |
| Nahrungsergänzung | ”Omega-3 Kapseln" | "Nahrungsergänzungsmittel: 60 Omega-3-Kapseln mit 500 mg Fischöl pro Portion” |
| Wohnaccessoires | ”Teelichthalter" | "Beiger Keramik-Teelichthalter mit geometrischem Muster, 8 cm Durchmesser” |
| Food/Gastronomie | ”Essen" | "Hausgemachte Kürbissuppe mit Kokosmilch und gerösteten Kürbiskernen in weißer Schale” |
| Immobilien | ”Wohnzimmer" | "Helles Wohnzimmer mit Parkettboden, Kaminofen und Blick auf den Garten” |
| SaaS/Screenshots | ”Dashboard" | "Screenshot: Analytics-Dashboard mit Umsatzkurve der letzten 30 Tage, oben rechts Filter für Zeitraum” |
| Gesundheit/Medizin | ”Arzt" | "Ärztin im weißen Kittel erklärt Patientin ein Röntgenbild am Bildschirm” |
| Fitness/Sport | ”Yoga" | "Teilnehmerin übt Krieger-II-Pose in einem Yoga-Kurs in einem hellen Studio” |
Diese Tabelle zeigt das Muster: Farbe, Material, Zahl, Kontext oder Handlung machen aus einem Lückenfüller eine echte Beschreibung, egal in welcher Branche du unterwegs bist.
Alt-Text und Keywords: natürlich statt gestopft
Ein Keyword im Alt-Text hilft Suchmaschinen, das Bild einzuordnen, solange es zur tatsächlichen Bildbeschreibung passt. Keyword-Stuffing dagegen (“Yoga Kurs Berlin Yoga Frau Yoga Matte”) wirkt unnatürlich für Screenreader und wird von Google zunehmend als Spam-Signal gewertet. Ein einziges, präzise platziertes Keyword schlägt jede Wortliste.
KI-Alt-Text-Generatoren: Wo sie helfen und wo sie scheitern
KI-Tools wie Google Vision AI oder in CMS-Plugins integrierte Bilderkennung können in Sekunden einen ersten Alt-Text-Entwurf liefern, gerade bei großen Produktkatalogen ein echter Zeitgewinn. Sie haben aber systematische Schwächen, die du kennen solltest, bevor du sie ungeprüft übernimmst:
- Kein Seitenkontext: Dasselbe Produktfoto braucht auf einer Produktseite einen anderen Fokus als in einem Blogartikel, das kann keine KI aus dem Bild allein ableiten
- Ungenaue Zahlen und Farben: KI-Modelle “raten” bei Stückzahlen, exakten Farbtönen oder Markendetails oft ungenau
- Schwäche bei komplexen Bildern: Diagramme, Infografiken und mehrschichtige Screenshots werden häufig oberflächlich oder falsch zusammengefasst
- Fehlende emotionale Einordnung: Stimmung, Ton und Markenrelevanz eines Bildes erkennt KI nur begrenzt
Alt-Text, Title-Attribut und aria-label: Was gilt wann?
Diese drei Attribute werden häufig verwechselt, erfüllen aber unterschiedliche Aufgaben:
| Attribut | Zweck | Wird von Screenreadern vorgelesen? |
|---|---|---|
alt | Beschreibt den Inhalt eines Bildes | Ja, Standard für Bilder |
title | Zusätzlicher Tooltip-Hinweis beim Hovern | Uneinheitlich, viele Screenreader ignorieren es |
aria-label | Überschreibt den zugänglichen Namen eines Elements | Ja, hat Vorrang vor sichtbarem Text |
Faustregel: Für Bilder reicht in fast allen Fällen ein gutes alt-Attribut. aria-label nutzt du für interaktive Elemente ohne eigenen Bildinhalt, etwa einen Icon-Button. Kombiniere niemals alt und aria-label mit widersprüchlichem Inhalt am selben Element, Screenreader nutzen dann nur eines der beiden.
schema.org ImageObject: Ersetzt das den Alt-Text?
Nein. ImageObject ist strukturierte Daten für Suchmaschinen und KI-Crawler, sie beschreiben Bild-Metadaten wie Bildunterschrift, Lizenz oder Aufnahmedatum für die Bildersuche. Der Alt-Text bleibt davon unabhängig die Grundlage für Barrierefreiheit. Beide ergänzen sich: ImageObject macht dein Bild in strukturierten Suchergebnissen auffindbarer, der Alt-Text macht es für Menschen mit Screenreader verständlich. Mehr zur technischen Bildoptimierung insgesamt, von Dateiformaten bis Bild-Sitemaps, findest du in unserem Artikel Bilder SEO richtig gemacht.
WCAG 2.2 und Alt-Text: Die Grundlage kompakt
Die Web Content Accessibility Guidelines regeln in Erfolgskriterium 1.1.1 (Non-text Content), dass jedes nicht-textliche Element ein textliches Äquivalent braucht, mit klar definierten Ausnahmen für dekorative Bilder. Erfolgskriterium 1.4.5 (Images of Text) ergänzt: Text sollte, wo möglich, als echter Text und nicht als Bild eingebunden werden. Für den deutschen Rechtsrahmen und die konkrete Umsetzung im Shopify-Kontext haben wir das BFSG ausführlich in Shopify ALT-Texte übersetzen aufgearbeitet.
Der Alt-Text-Audit-Workflow: So prüfst du eine ganze Website
- Crawlen: Screaming Frog oder ein SEO-Audit-Tool über die gesamte Website laufen lassen und alle Bilder ohne Alt-Attribut exportieren. Eine Übersicht passender Tools findest du in Die besten SEO-Tools für Shopify.
- Kategorisieren: Jedes Bild einem der vier Typen zuordnen, dekorativ, informativ, funktional oder komplex.
- Framework anwenden: Je nach Typ die passende Strategie umsetzen, siehe Tabelle oben.
- Generische Texte flaggen: Alt-Texte wie “Bild”, “Foto”, Dateinamen oder Keyword-Listen identifizieren und überarbeiten.
- Stichprobe mit Screenreader: Ein paar zufällige Seiten mit einem echten Screenreader (VoiceOver, NVDA) durchgehen, das deckt Probleme auf, die reine Tools übersehen.
- Wiederkehrender Rhythmus: Alt-Text-Checks als festen Punkt bei jedem neuen Bild-Upload verankern, nicht nur einmalig beim Launch.
Bilder-SEO und Barrierefreiheit aus einer Hand?
Wir prüfen deine Bilder auf Alt-Texte, Core Web Vitals und BFSG-Konformität und sorgen dafür, dass dein Shop für Menschen, Suchmaschinen und KI gleichermaßen funktioniert.
Die häufigsten Fehler beim Alt-Text schreiben
- Keyword-Stuffing: Mehrere Varianten desselben Keywords aneinandergereiht statt einer natürlichen Beschreibung
- Zu kurze Texte: “Apfel” liefert keine Farbe, Sorte oder Kontext
- Fehlende Alt-Texte bei Diagrammen: Daten gehen für Screenreader-Nutzer komplett verloren
- Dekorative Bilder falsch behandelt: Ein leeres Alt-Attribut fehlt, Screenreader liest unnötige Informationen vor
- Hintergrundbild-Falle: Wichtige Inhalte stecken in einem CSS-Hintergrundbild ohne jede Textalternative
- Redundanz zur Bildunterschrift: Alt-Text wiederholt die Caption wortgleich, statt sie sinnvoll zu ergänzen
- “Hier klicken” als Linktext: Ohne Kontext wissen Screenreader-Nutzer nicht, wohin der Link führt
Checkliste: Alt-Text-Regeln zum Nachschlagen
Alt-Text-Checkliste
Alle Regeln für Alt-Texte, die SEO, Barrierefreiheit und KI-Suche gleichzeitig bedienen
Vor dem Schreiben
- Bildtyp bestimmt: dekorativ, informativ, funktional oder komplex
- Einsatzort und Kontext der Seite berücksichtigt
- Geprüft, ob eine Bildunterschrift den Alt-Text bereits teilweise abdeckt
Beim Formulieren
- Objekt, relevante Details und Kontext in einem Satz verbunden
- Genau ein natürliches Keyword eingebaut, kein Stuffing
- "Bild von" und "Foto zeigt" vermieden
Sonderfälle
- Dekorative Bilder mit leerem alt="" versehen
- Funktionale Bilder beschreiben die Aktion, nicht das Motiv
- Diagramme und Screenshots haben eine ausführliche Erklärung im Fließtext ergänzt
- CSS-Hintergrundbilder mit relevantem Inhalt haben eine Textalternative
Vor dem Launch
- KI-generierte Alt-Texte manuell gegengelesen
- Stichprobe mit echtem Screenreader getestet
- Alt-Text-Check als festen Punkt im Upload-Workflow verankert
Alt-Texte sind nur ein Baustein der technischen Bildoptimierung. Wie gut deine Bilder performen, hängt genauso von Ladezeit und Core Web Vitals ab. Neu bei SEO? Unser Artikel Was ist SEO liefert die Grundlagen, Shopify Shop-Geschwindigkeit optimieren den tieferen Einblick in Ladezeit.
Häufig gestellte Fragen zum Alt-Text
Ein Alt-Text ist die im alt-Attribut eines img-Tags hinterlegte Beschreibung eines Bildes. Er informiert Screenreader-Nutzer über den Bildinhalt und gibt Suchmaschinen ein textliches Signal, worum es in einem Bild geht.
Es gibt keine feste Zeichengrenze, an der Screenreader abbrechen. Orientiere dich an einem Satz für einfache Bilder und ein bis zwei Sätzen bei mehreren relevanten Details, wichtig ist: so kurz wie möglich, so lang wie nötig.
Kein direkter Rankingfaktor, aber ein wichtiges Kontextsignal für die Bildersuche und für das inhaltliche Verständnis der gesamten Seite, auch durch KI-Suchmaschinen.
Ein leeres Alt-Attribut (alt=""). Screenreader überspringen das Bild dann korrekt, da es keine eigene Information trägt.
Mit einem kurzen Alt-Text als Kurzfassung und der eigentlichen Kernaussage zusätzlich im umgebenden Text oder in einer Datentabelle, damit keine Information für Screenreader-Nutzer verloren geht.
Hintergrundbilder haben kein natives Alt-Attribut und werden von Screenreadern ignoriert. Trägt das Bild wichtige Informationen, brauchst du ein aria-label oder einen versteckten Textäquivalent.
Als ersten Entwurf ja, aber KI kennt den Seitenkontext nicht und ist bei Zahlen, Markendetails und komplexen Bildern ungenau. Ein Mensch sollte jeden Vorschlag kurz gegenlesen.
Alt-Text beschreibt Bildinhalte und wird standardmäßig vorgelesen, title ist ein Tooltip-Hinweis, der von vielen Screenreadern ignoriert wird, aria-label überschreibt den zugänglichen Namen eines interaktiven Elements.
Ja, aber nur ein natürlich passendes Keyword pro Bild. Mehrere Keyword-Varianten aneinandergereiht wirken unnatürlich und werden von Google als Spam-Signal gewertet.
Screenreader-Nutzer erfahren nichts über das Bild, das ist ein Verstoß gegen WCAG 1.1.1 und relevant für das BFSG. Gleichzeitig verpasst du Sichtbarkeit in der Bildersuche und schlechteres Kontextverständnis für KI-Suchmaschinen.
Nein. ImageObject sind strukturierte Metadaten für Suchmaschinen und KI-Crawler, der Alt-Text bleibt unabhängig davon die Grundlage für Barrierefreiheit, beide ergänzen sich.
Mit einem Crawl-Tool wie Screaming Frog alle Bilder ohne Alt-Attribut identifizieren, nach Bildtyp kategorisieren, generische Texte flaggen und stichprobenartig mit einem echten Screenreader testen.
Quellen:
