Ein Bild sagt mehr als tausend Worte, heißt es. Für einen blinden Menschen sagt es genau so viel wie der Text, den Du im Backend dazu hinterlegst. Steht dort nichts Sinnvolles, ist das Bild für ihn schlicht nicht vorhanden.
Dieser hinterlegte Text heißt Alt-Text, die Textalternative zum Bild. Ein Screenreader liest ihn anstelle der Grafik vor, und auch wenn ein Bild einmal nicht lädt, erscheint er als Ersatz. Die SEO-Seite davon, also Dateiname und Ladeverhalten, behandelt ein eigener Beitrag zur Bilder-Optimierung für Suchmaschinen.
Wofür der Alt-Text gebraucht wird
Zwei sehr verschiedene Leser hängen am selben kurzen Satz. Der eine sitzt vor einem Screenreader und hört Deine Seite, statt sie zu sehen. Für ihn ist der Alt-Text die ganze Information, die das Bild sonst still vor sich her trägt.
Der andere Leser ist Google. Eine Suchmaschine erkennt auf einem Foto kein Hollandrad und keinen Kuchen, sie liest die Beschreibung. Ein treffender Alt-Text hilft also beim Vorlesen und in der Bildersuche gleichermaßen, ein leeres Feld nützt keinem von beiden.
Damit ist der Alt-Text Teil des Prinzips Wahrnehmbar aus den vier WCAG-Grundlagen. Inhalte sollen sich mit verschiedenen Sinnen erfassen lassen. Was das Auge sieht, muss das Ohr hören können.
Was ein guter Alt-Text leistet
Ein guter Alt-Text ersetzt das Bild, er beschreibt es nicht von außen. Die Frage lautet nicht „Was ist auf dem Foto?", sondern „Welche Aussage geht verloren, wenn das Bild fehlt?". Genau diese Aussage gehört in das Feld, nicht mehr und nicht weniger.
Der Kontext entscheidet über den Inhalt. Dasselbe Foto eines roten Fahrrads braucht im Verkaufsangebot „Rotes Hollandrad, Modell Amsterdam, mit Korb", in einem Beitrag über Stadtverkehr dagegen nur „Radfahrerin an einer Kreuzung". Das Bild ist gleich, die nützliche Information unterscheidet sich.
Der Test dafür ist denkbar einfach. Lies Deinen Satz laut vor und frag Dich, ob jemand ohne das Bild dieselbe Vorstellung bekommt wie Du. Klingt es sinnvoll und konkret, passt es. Klingt es nach einer Notlösung, fehlt noch die eigentliche Aussage.
Gute und schlechte Beispiele
Der Unterschied wird am schnellsten an gegenübergestellten Formulierungen klar. Drei typische Bilder, jeweils einmal schwach und einmal brauchbar beschrieben.
- Ein Team-Foto: Schwach ist „Foto" oder ein nichtssagender Dateiname. Brauchbar ist „Vierköpfiges Team der Tischlerei vor der Werkstatt".
- Ein Produktbild: Schwach ist „Stuhl". Brauchbar ist „Eichenstuhl mit geflochtener Sitzfläche, von der Seite".
- Eine Karte: Schwach ist „Anfahrt". Brauchbar ist „Lageplan, Eingang in der Seitenstraße hinter dem Hof".
Das Muster dahinter ist immer dasselbe. Ein guter Alt-Text benennt das Konkrete, das ein Sehender ohne Nachdenken erfasst. Ein schwacher Alt-Text wiederholt nur, dass dort überhaupt ein Bild ist.
Wann ein Bild bewusst stumm bleibt
Nicht jedes Bild trägt Information. Ein Trennstrich, eine schmückende Hintergrundgrafik oder ein dekoratives Icon neben einer Überschrift sagen inhaltlich nichts. Liest der Screenreader sie trotzdem vor, stört das nur den Lesefluss.
Für solche reinen Deko-Bilder lässt Du das Alt-Feld im Backend bewusst leer. Das ist die klare Ansage an die Software: Hier gibt es nichts zu hören, überspring es. Der Screenreader geht dann sauber darüber hinweg, statt einen Dateinamen vorzubuchstabieren.
Die Faustregel: Trägt das Bild eine Aussage, beschreibst Du sie. Ist es nur Schmuck, bleibt das Feld leer. Im Zweifel hilft die Probe, ob der Text der Seite ohne dieses Bild unvollständig wäre.
Diagramme und Schaubilder beschreiben
Bei einem Diagramm, einer Infografik oder einem Schaubild reicht ein kurzer Satz nicht aus. Eine Tortengrafik mit „Umsatzverteilung 2025" zu beschreiben, verschweigt genau die Zahlen, um die es geht.
Hier hilft ein zweistufiges Vorgehen. Der Alt-Text benennt knapp, was die Grafik zeigt, und die eigentlichen Werte stehen als sichtbarer Text direkt daneben oder darunter. So bekommt der hörende Nutzer dieselbe Information wie das Auge, nur in lesbarer Form.
- Kurze Beschreibung im Alt-Feld: „Tortendiagramm der Umsatzverteilung nach Region."
- Die Daten im Fließtext: eine Aufzählung oder Tabelle mit den konkreten Prozentwerten, sichtbar für alle.
Dieser Doppelweg hat einen angenehmen Nebeneffekt. Die Daten im Text helfen auch Lesern, die das Diagramm sehen, aber die genauen Zahlen brauchen. Eine gute Beschreibung dient selten nur einer Gruppe.
Häufige Fehler beim Alt-Text
Die meisten schwachen Alt-Texte folgen einem von wenigen Mustern. Wer sie kennt, erkennt sie im eigenen Backend sofort wieder.
- „Bild von …": Der Screenreader kündigt ein Bild ohnehin als Grafik an. „Bild von einem Hund" wird zu „Grafik, Bild von einem Hund". Lass die Vorrede weg und schreib direkt „Hund auf einer Wiese".
- Der Dateiname: Eine vorgelesene Zeichenfolge wie das Kürzel der Kamera ergibt nur Buchstabensalat. Das passiert, wenn das Feld leer bleibt und das System notdürftig den Dateinamen einspringen lässt.
- Doppelte Information: Steht unter dem Bild bereits eine Bildunterschrift mit demselben Wortlaut, hört der Nutzer alles zweimal. Dann lässt Du das Alt-Feld besser leer.
- Zu lang: Ein ganzer Absatz im Alt-Feld ermüdet. Halte Dich an einen knappen Satz, ausführliche Erklärungen gehören in den sichtbaren Text.
In welcher Reihenfolge ein Screenreader diese Texte überhaupt vorliest, zeigt der Beitrag dazu, wie eine Seite vorgelesen wird.
Wo Du Alt-Texte pflegst
Den Alt-Text trägst Du bequem im Backend Deiner Webseite ein, ohne eine Zeile Quelltext zu berühren. In TYPO3, WordPress und den meisten Systemen gibt es zu jedem Bild ein Feld „Alternativer Text" oder „Alt-Text", oft direkt in der Medienverwaltung neben Titel und Bildunterschrift. Welche Hilfen ein barrierefreies TYPO3 von Haus aus mitbringt, liest Du im eigenen Beitrag zum CMS.
Bevor Du es ausfüllst, stell Dir eine einzige Frage: Welche Aussage transportiert dieses Bild an dieser Stelle? Den Rest erledigt eine kurze Routine, die schnell in Fleisch und Blut übergeht.
- Zweck klären: Trägt das Bild Information oder ist es Deko? Deko lässt das Feld leer.
- Knapp beschreiben: ein Satz, der die Aussage des Bildes wiedergibt, ohne „Bild von".
- Kontext prüfen: Steht die Information schon im Text daneben? Dann nicht wiederholen.
- Laut lesen: Klingt der Satz vorgelesen sinnvoll? Wenn ja, passt er.
Wer übersehene Bilder aufspüren will, kommt ohne Quelltext-Suche aus. Kostenlose Werkzeuge wie die Browser-Erweiterungen WAVE oder axe markieren auf Knopfdruck jedes Bild ohne Alt-Text auf einer Seite. So findest Du in Minuten, wo noch Lücken sind, statt jede Unterseite von Hand durchzugehen.
Die einzelnen Begriffe rund um die Bildverwaltung, von Thumbnail bis Lightbox, ordnet der Beitrag zu den Grundbegriffen der Bildverwaltung ein. Alt-Texte sind dort einer von vier Bausteinen.
Fazit
Ein guter Alt-Text kostet Dich pro Bild zehn Sekunden Nachdenken und entscheidet, ob ein Teil Deiner Besucher den Inhalt überhaupt mitbekommt. Die Regel ist einfach: Beschreibe die Aussage, lass Deko leer, wiederhole nichts.
Geh das beim nächsten Bild-Upload einmal bewusst durch, dann wird es zur Gewohnheit. Deine Bilder sprechen danach mit allen Besuchern, auch mit denen, die sie nie zu Gesicht bekommen.