Wie nutzt du Alt-Texte für SEO, Accessibility und UX richtig?

Stell dir vor, das fiktive Tierheim Pfotenhilfe hat 150 Fotos von vermittlungsbereiten Tieren auf seiner Website, aber keines davon hat einen Alt-Text. Die Folge: Keines der Bilder taucht in der Google-Suche auf und Menschen, die Screenreader benutzen, können die Seite nicht nutzen. In diesem Artikel erfährst du, wie du Alt-Texte schreibst, die barrierefrei und SEO-optimiert sind – ohne stundenlang zu grübeln. 

* Dieser Artikel ersetzt keine Rechtsberatung. Ob deine Website vom Barrierefreiheits-Stärkungs Gesetz (BFSG) betroffen ist, hängt von verschiedenen Faktoren ab. Bei Unsicherheit solltest du eine:n auf IT- und Medienrecht spezialisierte:n Anwält:in kontaktieren. 

In diesem Artikel

Was sind Alt-Texte eigentlich? 

Alt-Texte (Kurz für Alternativ-Texte) machen Bilder für Suchmaschinen und Screenreader maschinenlesbar. Sie helfen blinden Menschen dabei, deine Inhalte zu verstehen. Gleichzeitig ranken deine Bilder höher in der Google-Bildersuche. Seit Juni 2025 gilt in Deutschland das Barrierefreiheits-Stärkungs-Gesetz (BFSG), welches viele Webseiten verpflichtet, barrierefrei zu sein. Dazu gehören unter anderem auch die Alt-Texte für Bilder. Für öffentliche Stellen des Bundes gilt die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0). 

Warum Alt-Texte für deine Website unverzichtbar sind 

Alt-Texte bereichern deine Website vor allem in 2 Bereichen, egal ob du verpflichtet bist oder nicht: 

1. Barrierefreiheit: Menschen mit Sehbeeinträchtigungen nutzen Screenreader, die Webseiten vorlesen. Ohne Alt-Texte bleibt Ihnen der visuelle Inhalt vorenthalten. 
2. Suchmaschinenoptimierung: Circa 20 % der Google-Suchen laufen über die Bildersuche. Google nutzt die Alt-Texte, um Bilder im Kontext zu verstehen und zu ranken. Mehr zu den Grundlagen der Suchmaschinenoptimierung erfährst du in unserem Artikel „SEO Grundlagen: Effektive Strategien für 2025“.

Was der Alt-Text leisten soll (und was nicht) 

Ein guter Alt-Text beschreibt nicht nur, was auf dem Bild zu sehen ist, sondern welche Informationen das Bild vermitteln soll. Er ist im HTML in den <img>-Tag integriert, das sieht dann zum Beispiel so aus: 

<img src=”hundewelpe.jpg” alt=”Leo, ein verspielter schwarz-brauner Mischling mit neongrünem Halstuch, springt mit Plüschigel im Maul über die Tierheim-Wiese”>.

In der Regel kannst du über dein CMS (Content-Management-System) die Alt-Texte für deine Bilder in der Verwaltung festlegen. 

Das SOLL Alt-Text leisten: 

• Die Funktion oder Information des Bildes vermitteln
• Den Kontext der Seite berücksichtigen 
• Natürlich in den Lesefluss passen 
• Keywords enthalten, wenn sie das Bild beschreiben.

Das sollte Alt-Text NICHT tun: 

• Informationen wiederholen, die bereits im Text stehen 
• Keywords erzwingen, die nicht passen 
• Emojis oder Hashtags beinhalten. 

Welche Bilder brauchen einen Alt-Text? 

Nicht jedes Bild benötigt einen Alt-Text. Die Web Content Accessibility Guidelines, die die Grundlage für die Gesetzeslage sind, unterscheiden: Informative Bilder brauchen einen Alt-Text, dekorative Bilder hingegen nicht. 

Als Entscheidungshilfe, welche Bilder einen Alt-Text brauchen, stelle dir die Frage: 

• Warum habe ich das Bild ausgewählt? 
• Was möchte ich damit vermitteln? 

Wenn du darauf keine Antwort findest, ist es dekorativ → kein Alt-Text notwendig. 

Informative Bilder: Immer einen Alt-Text verwenden 

• Tierfotos auf Vermittlungsseiten (zeigen Aussehen und Charakter) 
• Produktfotos in Online-Shops 
• Screenshots von Software 
• Infografiken und Diagramme 

💡 Ausnahmen bestätigen die Regel: Wenn die Information aus dem Bild auch in der Nähe in Textform (beispielsweise als Bildunterschrift) sichtbar ist, brauchst du keinen Alt-Text für die Barrierefreiheit. Suchmaschinen können diese Zuordnung aber nicht machen, daher ist ein Alt-Text immer zu bevorzugen! 

Dekorative Bilder: Leeres Alt-Attribut nutzen 

• Trennlinien und Hintergrundmuster 
• Aufzählungs-Icons (Pfötchen, Sterne) 
• Rein dekorative Stockfotos 

💡 Wichtig: Setze bei dekorativen Bildern ein leeres Alt-Attribut: <img src=”quelle.jpg” alt=””> Sonst lesen Screenreader den Dateinamen vor, z.B. „IMG_0123.jpg“. Damit kann niemand etwas anfangen, das ist verwirrend. 

Praxisbeispiel: Tierheim Pfotenhilfe 

Die Fotos vom Hund Leo sind informativ. Sie zeigen, wie er aussieht und geben Einblick in seine Persönlichkeit. Die kleinen Pfötchen-Icons neben Aufzählungen sind aber dekorativ. 

Alt-Text richtig schreiben: Die Telefon-Test-Methode 

Viele tendieren dazu, die Grafik in ca. 5 Wörtern so einfach wie möglich zu beschreiben: „Bild von einem Hund“. Aber wirklich sinnvoll ist das nicht, vor allem wenn eine Seite ganz viele Bilder von einem Hund zeigt. Es fehlen Kontext und Inhalt. Um einen guten Alt-Text zu schreiben, gibt es eine einfache Methode: Stell dir vor, du telefonierst mit jemandem und beschreibst das Bild. Die Person 

am anderen Ende des Hörers, kann das Bild nicht sehen – welche Informationen übermittelst du ihr? Welche Fragen könnte sie haben? 

Beispiel Hund Bruno auf der Vermittlungsseite:

❌ Schlecht: „Bild von einem Hund“ 

→ Zu allgemein, keine hilfreiche Information 

✅ Gut: „Bruno, freundlicher Schäferhund-Mischling mit aufgestellten Ohren und wedelndem Schwanz, sitzt erwartungsvoll vor dem Tierheimzaun“ 

→ Vermittelt Aussehen, Charakter und Situation 

Du merkst sicher sofort: Der gute Alt-Text hilft potenziellen Adoptierenden, sich Bruno vorzustellen. Er beschreibt nicht nur Fakten, sondern auch Charakter und Kontext: wertvoll für Suchmaschinen UND Screenreader-Nutzer:innen. 

Wie lange sollte ein Alt-Text sein? 

Es gibt übrigens keine Längenbegrenzung seitens Google für den Alt-Text. Manche Screenreader lesen Texte aber in Chunks von maximal 125 Zeichen vor. Es ist also eine gute Faustregel, seinen Alt-Text prägnant und unter 125 Zeichen zu halten. Wichtiger ist aber, Kontext und Information verständlich zu vermitteln.

Sollte ich den Bild-Typ im Alt-Text mit aufnehmen? 

Es ist naheliegend, den Bild-Typ mit in den Alt-Text aufzunehmen. „Bild von einem Welpen, der …“. Screenreader kündigen Grafiken aber üblicherweise schon automatisch an. 

Das würde dann so klingen: „Grafik: Bild von einem Welpen, der …“. Das ist redundant und nicht hilfreich, außerdem verschwendet das unnötig Platz im Alt-Text. 

Besser ist es, direkt mit der Bildbeschreibung zu beginnen: „Grafik: Ein Welpe, der …“. 

💡 Ausnahme: Wenn der Medientyp wirklich relevant ist. In manchen Fällen gehört der Medientyp zur Information: 

✅ „Screenshot: WordPress-Dashboard mit Plug-in-Menü links markiert“ 

→ In Tutorials ist wichtig, dass es ein Screenshot ist 

✅ „Röntgenbild: Bruch im linken Unterarmknochen“ 

→ Der Medientyp ist medizinisch relevant 

✅ „Historisches Foto von 1945: Trümmerlandschaft Berlin“

→ Das Alter des Fotos gehört zur Information 

✅ „KI-generiertes Bild: Futuristische Stadt mit fliegenden Autos“ 

→ Die Herkunft ist für das Verständnis wichtig 

Alt-Text für verschiedene Bildtypen: Praktische Beispiele

Fotos von Produkten, Tieren, Menschen, … 

Beschreibe etwa das Aussehen, Sorte, Größe, Farbe(n), Körperhaltung, Gesichtsausdruck, Emotionen, Aktivitäten. 

✅ „Mimi, die dreifarbige Hauskatze mit bernsteinfarbenen Augen, rollt sich gemütlich auf ihrem blauen Kuschel-Kissen zusammen.“ 

✅ „Manuelle Kaffeemühle aus dunklem Walnussholz mit verchromtem Mahlwerk und Keramik-Handkurbel.“

Screenshots und Software 

Beschreibe beispielsweise den Programmnamen, das Aussehen, wichtige Interaktionselemente, Position, Hervorhebungen, Zahlen/Daten (falls wichtig für das Verständnis). Falls es relevant ist, erwähne kurz, dass es sich um einen Screenshot handelt, durch ein vorangestelltes „Screenshot:“. 

✅ „Screenshot: Online-Adoptionsformular. Oben links rot markiert: Dropdown-Menü 'Wunschtier auswählen'. Darunter Textfelder für Name und E-Mail“ 

✅ „Adoptionsformular mit roter Fehlermeldung unter dem Feld 'Telefonnummer': Bitte gültige Nummer eingeben“ 

✅ „Screenshot: Neues Dashboard mit KI-Textgenerator. Oben mittig violettfarbener Button 'Content mit KI erstellen' neben dem Texteditor“ 

Infografiken und Diagramme 

Beschreibe zum Beispiel den Diagrammtyp, Thema/Titel des Diagramms, Achsenbeschriftungen, die wichtigsten Trends und Erkenntnisse sowie Vergleichswerte, Zeitraum und Einheiten. 

✅ „Balkendiagramm: Vermittlungsquote 2025 nach Tierart. Kleintiere führen mit 92 %, gefolgt von Hunden 85 % und Katzen 78 %.“ 

Der Alt-Text sollte gerade bei komplexen Grafiken die Hauptinformation im Alt-Text beinhalten und Details und zugehörige Informationen im umgebenden Text haben. 

💡 Wichtig: Die Beispiele dienen zur Inspiration, du musst nicht immer alle angegebenen Daten im Alt-Text haben, sondern nur die essenziellen Informationen, die von dem Bild vermittelt werden!

Sonderfall: Text im Bild 

Eigentlich sollte dieser Sonderfall gar keiner sein, denn Text sollte immer in Textform verwendet werden. So können Suchmaschinen und Screenreader ihn einfach verarbeiten. Hin und wieder lässt es sich aber wirklich nicht vermeiden. Dann schreibst du den Text vom Bild 1:1 in den Alt-Text, er wird dann ganz normal vorgelesen. Bedenke aber: Für Suchmaschinen ist dieser Text dann irrelevant und nutzlos. Vermeide es wirklich, soweit es geht.

Alt-Text SEO: So integrierst du Keywords natürlich 

Alt-Texte sind ein bestätigter Ranking-Faktor für Suchmaschinen. Es ist also sinnvoll, dass du wichtige Keywords, die du in deiner Keywordrecherche identifiziert hast, auch im Alt-Text verwendest. Dabei solltest du aber darauf achten, dass sie natürlich im Lesefluss enthalten sind. 

So integrierst du Keywords richtig: 

Am besten wählst du direkt Bilder aus, die dein Keyword repräsentieren. Vermeide auf jeden Fall, Stock-Fotos einen Kontext überzustülpen und ganz viele Keywords in die Beschreibung aufzunehmen. Sogenanntes Keywordstuffing schadet deiner SEO-Sichtbarkeit nur. Faustregel: Ein Keyword pro Bild. 

✅ Gut: „Katzendame Sina erforscht neugierig ihr temporäres Zuhause im Tierheim Pfotenhilfe in München.“ 

❌ Schlecht: „Hundewelpe Rauhaardackel Tierheim München Tiere vermitteln Tiere kaufen“. 

Sollte ich Alt-Texte einfach von KI erstellen lassen? 

Gerade am Anfang ist es schwierig, gute Alt-Texte zu schreiben, die barrierefrei und für Suchmaschinen optimiert sind. Es gibt Tools, die mit KI einem einen Alt-Text schreiben. Manche davon berücksichtigen auch ein eingebautes Keyword. Aber wirklich den Kontext des Bildes berücksichtigen die Tools meistens leider nicht. 

Ich rate eher davon ab, diese Arbeit komplett an die KI auszulagern, aber gerade am Anfang kann es für Inspiration total hilfreich sein, sich Alt-Texte von der KI generieren zu lassen. Wichtig ist aber, dass du die Ergebnisse immer manuell prüfst und anpasst. 

Prompt-Vorlage für bessere Alt-Texte 

Ich habe einen Prompt erstellt, den du kopieren und in ChatGPT, Gemini, Claude, … einfügen kannst, zusammen mit Kontext zur Website und deinem Bild, damit du am Anfang Inspiration bekommen und lernen kannst, selbstständig gute Alt-Texte zu schreiben. 

Tools, die dich bei deinen Alt-Texten unterstützen 

Hier habe ich auch noch einige Tools gesammelt, die dir beim Erstellen deiner Alt-Texte helfen können:

• Mit WAVE kannst du gratis testen, ob deine Webseite barrierefrei ist.
• silktide ist eine Chrome-Erweiterung zum Testen der Barrierefreiheit, auch gratis nutzbar.
• Mit seobility kannst du deine Suchmaschinenoptimierung testen für besseres Ranking und mehr Sichtbarkeit. Es gibt eine Gratis- und eine Bezahlversion.
• Mithilfe von ChatGPT, Claude & Co. und meinem Prompt oben kannst du Inspiration sammeln und lernen. 

📌 Fazit: Alt-Texte sind nicht nur nice to have 

Alt-Texte sind die Brücke zwischen visuellen Inhalten und digitaler Barrierefreiheit. Sie helfen Menschen und Suchmaschinen, deine Inhalte zu verstehen. Sie helfen Suchmaschinen, deine Bilder zu ranken. 

Die drei wichtigsten Takeaways:

1. Kontext vor Beschreibung: „Goldgelber Strand vor unserem Hotel mit gemütlichen Sonnenliegen“ ist besser als „Foto von einem Strand“. 
2. So kurz wie möglich, so lang wie nötig (ca. max. 125 Zeichen). 
3. Beschreibe, was wirklich zu sehen ist: keine Interpretation.