Alt-Texte richtig schreiben – mit Beispielen

Ein Alt-Text ist ein kurzer Text, der ein Bild ersetzt, wenn jemand es nicht sehen kann. Screenreader lesen ihn blinden und sehbehinderten Menschen vor, der Browser zeigt ihn an, wenn ein Bild nicht lädt, und Suchmaschinen nutzen ihn, um zu verstehen, was auf einem Bild zu sehen ist. Trotzdem fehlt er erstaunlich oft: Laut dem Bericht «WebAIM Million 2026» hatten 53,1 % der eine Million meistbesuchten Startseiten mindestens ein Bild ohne Alternativtext.

Die gute Nachricht: Alt-Texte sind eine der Barrieren, die deine Redaktion selbst beheben kann, ohne Programmierkenntnisse. Hier erfährst du, welche Bilder einen Alt-Text brauchen, welche nicht, und wie ein guter aussieht.

Wofür Alt-Texte da sind

Die Richtlinien für barrierefreie Webinhalte (WCAG) verlangen, dass jeder Inhalt, der kein Text ist, eine Textalternative hat, die denselben Zweck erfüllt. Das ist der Kern: Ein Alt-Text beschreibt nicht einfach, was auf dem Bild ist, sondern was das Bild an dieser Stelle leisten soll.

Ein hilfreicher Trick vom W3C, dem Gremium hinter den WCAG: Stell dir vor, du liest die Seite jemandem am Telefon vor. Was würdest du zum Bild sagen, damit die Person alles Wichtige mitbekommt? Genau das gehört in den Alt-Text. Würdest du das Bild gar nicht erwähnen, ist es wahrscheinlich dekorativ.

Informativ, dekorativ oder funktional?

Bevor du schreibst, ordne das Bild ein. Davon hängt ab, was in den Alt-Text gehört.

Informative Bilder

Informative Bilder zeigen etwas, das für den Inhalt wichtig ist: ein Produkt, eine Person, einen Ort, eine Situation. Der Alt-Text beschreibt kurz das Wesentliche, so wie es im Zusammenhang der Seite zählt.

Dekorative Bilder

Dekorative Bilder dienen nur der Gestaltung: Hintergrundmuster, Schmuckelemente, Stimmungsbilder ohne eigene Aussage. Solche Bilder bekommen ein leeres Alt-Attribut, also alt="" ohne Leerzeichen zwischen den Anführungszeichen. So überspringt der Screenreader das Bild. Fehlt das Attribut ganz, liest manches Programm stattdessen den Dateinamen vor.

Funktionale Bilder

Das sind Bilder in Links oder Buttons, etwa eine Lupe für die Suche oder ein Drucker-Symbol. Hier beschreibt der Alt-Text nicht das Bild, sondern die Funktion: «Suchen», nicht «Lupe». Fehlt der Text, hört eine Screenreader-Nutzerin im schlimmsten Fall nur einen Dateinamen oder eine Webadresse und weiss nicht, was der Button tut.

7 Beispiele: schlecht und gut

1. Teamfoto auf der Über-uns-Seite. Schlecht: «Foto». Gut: «Unser Team aus fünf Personen vor dem Firmengebäude.» Wenn die Namen im Text darunter stehen, musst du sie nicht wiederholen.
2. Produktbild im Onlineshop. Schlecht: «IMG_4711.jpg». Gut: «Wanderschuh in Dunkelgrün, seitliche Ansicht mit Profilsohle.» Beschreibe, was für den Kaufentscheid wichtig ist.
3. Logo oben links, verlinkt zur Startseite. Schlecht: «Logo». Gut: «Musterfirma, zur Startseite». Das Wort «Logo» braucht es nicht, wichtig sind Name und Ziel des Links.
4. Lupe als Such-Button. Schlecht: «Lupe» oder gar nichts. Gut: «Suchen».
5. Dekoratives Wellenmuster zwischen zwei Abschnitten. Schlecht: «Blaue Welle als Trennlinie». Gut: leeres Alt-Attribut, weil das Bild keine Information trägt.
6. Flyer für einen Anlass als Bild. Schlecht: «Flyer». Gut: der Text des Flyers, also Titel, Datum, Zeit und Ort. Noch besser: Die Angaben stehen zusätzlich als normaler Text auf der Seite, dann kann der Alt-Text kurz bleiben.
7. Balkendiagramm mit Mitgliederzahlen. Schlecht: «Diagramm». Gut: ein kurzer Alt-Text wie «Balkendiagramm: Mitgliederzahlen 2021 bis 2025, Erklärung im Text darunter» und daneben die Zahlen als Text oder Tabelle.

Die Beispiele sind bewusst allgemein gehalten. Wie gut ein Alt-Text ist, hängt immer vom Zusammenhang ab: Dasselbe Bild kann auf einer Seite informativ und auf einer anderen dekorativ sein.

Sonderfälle, die oft schiefgehen

Logos

Steht ein Logo allein in einem Link, gehören der Name und das Ziel in den Alt-Text, zum Beispiel «Musterfirma, zur Startseite». Steht der Firmenname im selben Link schon als Text daneben, bekommt das Logo ein leeres Alt-Attribut, sonst hört man den Namen doppelt. Ein Logo ohne Link bekommt einfach den Namen der Organisation.

Bilder mit Text

Steht auf einem Bild Text, der sonst nirgends vorkommt, muss dieser Text in den Alt-Text. Steht derselbe Text gleich daneben als echter Text, darf das Alt-Attribut leer bleiben. Am besten verzichtest du ganz auf Text in Bildern: Echter Text lässt sich vergrössern, übersetzen und von Suchmaschinen lesen.

Icons in Links

Hat ein Link Text und zusätzlich ein Symbol, etwa für «PDF» oder «öffnet in neuem Fenster», braucht das Symbol nur dann einen Alt-Text, wenn es eine zusätzliche Information trägt. Steht die Information schon im Linktext, bleibt das Alt-Attribut leer.

Diagramme und Grafiken

Komplexe Bilder lassen sich nicht in einem Satz beschreiben. Hier braucht es zwei Teile: einen kurzen Alt-Text, der sagt, was das Bild ist und wo die ausführliche Beschreibung steht, und die Beschreibung selbst, am besten als Text oder Tabelle direkt auf der Seite. Davon profitieren alle, auch Menschen, die Diagramme schlecht lesen können.

Typische Fehler

• «Bild von …» oder «Foto von …»: Der Screenreader sagt ohnehin an, dass ein Bild kommt. Diese Wörter kannst du weglassen. Ausnahme: Die Art des Bildes ist wichtig, etwa bei einem Gemälde oder einer Illustration.
• Dateinamen: «DSC_0815.jpg» hilft niemandem. Prüfe, ob dein System den Dateinamen automatisch als Alt-Text einträgt.
• Keyword-Stopfen: «Webdesign Thurgau Webagentur Kreuzlingen Website» ist kein Alt-Text. Google warnt selbst davor, Alt-Texte mit Suchbegriffen zu füllen.
• Doppelungen: Wiederholt der Alt-Text wörtlich die Bildunterschrift daneben, hört man alles zweimal.
• Zu lang: Ein Alt-Text sollte so knapp wie möglich sein. Braucht es mehr als einen kurzen Satz, gehört die Beschreibung in den Text.
• Leerzeichen im leeren Alt-Text: alt=" " mit Leerzeichen ist nicht dasselbe wie alt="". Manche Screenreader kündigen das Bild dann trotzdem an.

So prüfst du deine Alt-Texte

1. Im Redaktionssystem: Die meisten Content-Management-Systeme haben ein eigenes Feld für den Alternativtext, oft in der Medienverwaltung. Geh deine wichtigsten Seiten durch und schau, ob das Feld bei jedem Inhaltsbild ausgefüllt ist.
2. Mit einer Browser-Erweiterung: Kostenlose Werkzeuge wie «WAVE» zeigen dir direkt auf der Seite, welche Bilder keinen Alt-Text haben und was in den vorhandenen steht.
3. Im Code: Rechtsklick aufs Bild, «Untersuchen» wählen und nach alt="…" schauen.
4. Mit einem Screenreader: Auf dem Mac ist VoiceOver bereits eingebaut, für Windows gibt es den kostenlosen Screenreader NVDA. Hör dir eine Seite einmal an. Du merkst schnell, wo Informationen fehlen.

Checkliste für deine Redaktion

• Zeigt das Bild etwas, das für den Inhalt wichtig ist? Dann beschreibe kurz das Wesentliche.
• Ist das Bild ein Link oder Button? Dann beschreibe das Ziel oder die Funktion.
• Ist das Bild reine Dekoration? Dann leeres Alt-Attribut.
• Enthält das Bild Text? Dann gehört der Text in den Alt-Text, wenn er nicht schon daneben steht.
• Ist das Bild ein Diagramm? Dann kurzer Alt-Text plus ausführliche Beschreibung auf der Seite.
• Kein «Bild von», kein Dateiname, keine Keyword-Liste, keine Doppelung.

Gute Alt-Texte, besser gefunden

Alt-Texte helfen nicht nur Menschen mit Screenreader. Google nutzt sie nach eigenen Angaben zusammen mit der Bilderkennung und dem Seiteninhalt, um zu verstehen, worum es auf einem Bild geht. Ein sauberer Alt-Text ist also auch ein Beitrag zu deiner Auffindbarkeit.

Wie steht deine Website da?

Alt-Texte sind nur eine von mehreren Baustellen. In unserem kostenlosen Barrierefreiheits-Check schauen wir uns deine Startseite und eine wichtige Unterseite an, darunter Bilder, Kontraste, Tastaturbedienung und Formulare, und sagen dir verständlich, was du zuerst angehen solltest: Kostenlosen Barrierefreiheits-Check anfragen.