Unsere Mission:
Alt-Texte schreiben: So gelingt barrierefreie Bildbeschreibung
Alt-Texte sind kurze Bildbeschreibungen, die im Hintergrund einer Website hinterlegt werden. Sie werden nicht angezeigt, aber vorgelesen – von Screenreadern, der Technologie, auf die sehbehinderte Menschen täglich angewiesen sind. Screenreader geben Text als Sprache oder auf einer Braille-Zeile aus, sodass er ertastet werden kann. Fehlt der Alt-Text, bekommt die Person entweder gar nichts mitgeteilt oder nur den Dateinamen des Bildes: „DSC_1337-42.jpg". Das hilft niemandem. Alt-Texte erscheinen auch, wenn das Bild nicht geladen werden kann.
Das Gute: Wer einmal verstanden hat, wie ein guter Alt-Text aufgebaut ist, schreibt ihn schnell und sicher. Es braucht keine Ausbildung in Barrierefreiheit – nur ein paar klare Regeln und etwas Übung.
Diese Anleitung zeigt, wann ein Alt-Text nötig ist, wann er leer bleiben soll und wie Sie ihn so formulieren, dass er wirklich etwas vermittelt: nicht nur den Inhalt eines Bildes, sondern auch seine Stimmung und das, was es besonders macht. Mit einem Entscheidungsdiagramm, konkreten Beispielen und einer Übersicht der wichtigsten Bausteine.
Inhaltsverzeichnis
Was einen guten Alt-Text ausmacht – 10 Dinge, die zählen
1. Länge
Es gibt keine feste Zeichengrenze – weder technisch noch laut WCAG. Die Faustregel lautet: so kurz wie möglich, so ausführlich wie nötig.
2. Form
Ein Alt-Text sollte bestenfalls in einfacher Sprache geschrieben sein.
Kurze Sätze: Ein Satz enthält nur eine Aussage.
Aktiv statt Passiv: „Der Schreiner baut den Schrank“ statt „Der Schrank wird von dem Schreiner gebaut“.
Bekannte Wörter: Fremdwörter, lange Substantive (z. B. Behandlungskostenabrechnung) und Metaphern vermeiden oder erklären.
3. Nie „Bild von…" oder „Foto von…" schreiben
Screenreader kündigen Bilder bereits als Bilder an, eine solche Einleitung sorgt also für Dopplungen. Ein Hinweis auf Infografiken, Diagramme, Logos oder ähnliches ist aber hilfreich.
Schlecht: „Foto von unserer Teamleiterin Maria"
Besser: „Teamleiterin Maria Müller im Gespräch mit einem Kunden. Beide sitzen in einem hellen Büro. Sie schauen konzentriert auf einen geöffneten Laptop."
4. Dekorative Bilder: leer lassen
Wenn ein Bild nur zur Optik dient und keine Information trägt (z. B. eine dekorative Trennlinie oder ein Hintergrundmuster), dann wird das Alt-Attribut leer gesetzt: alt="". Der Screenreader überspringt das Bild dann vollständig.
Beispiel für ein dekoratives Bild: Eine abstrakte Wellengrafik als Trennelement
Richtig:
alt=""Falsch:
alt="Welle"oder gar kein Alt-Attribut (denn dann liest der Screenreader ggf. den Dateinamen vor)
5. Bilder mit Text – den Text exakt wiedergeben
Enthält ein Bild Text, sollte dieser im Alt-Attribut wortwörtlich stehen. Bilder von Text sollten allerdings generell vermieden werden, weil sie nicht skalierbar, nicht übersetzbar und schwer lesbar sind – ist es aber unvermeidbar, muss der gesamte Textinhalt ins Alt-Attribut übernommen werden.
Beispiel: Ein Werbebanner mit dem Text „20% Rabatt auf alle Kurse im Juni"
Falsch:
alt="Werbebanner mit Angebot"Richtig:
alt="Werbebanner mit einem roten Hintergrund und weißer Beschriftung: 20% Rabatt auf alle Kurse im Juni."
6. Bei Logos nicht nur „Logo“ schreiben
Logos sind nie dekorativ und benötigen immer einen Alt-Text. Beschreiben Sie erkennbare Symbole und schreiben Sie im Logo enthaltenen Text wörtlich ab.
Falsch:
alt="Logo"Falsch:
alt="Firmenlogo Musteragentur"Richtig:
alt="Logo der Musteragentur GmbH: Ein nach oben zeigendes Dreieck in Grün und Blau."Richtig:
alt="Logo der LEUCHTKRAFT Digitalagentur. In großen Buchstaben ist das Wort LEUCHTKRAFT zu sehen. Der Text verläuft leicht schräg nach rechts oben. Durch einen Schatteneffekt erscheinen die Buchstaben dreidimensional."
7. Funktionale Bilder (Buttons, Links)
Bei Bildern, die eine Aktion auslösen (z. B. ein Icon-Button oder eine verlinkte Grafik), beschreibt der Alt-Text die Funktion – nicht das Aussehen des Bildes.
Falsch:
alt="Lupe"(für einen Such-Button)Richtig:
alt="Suche starten"Falsch:
alt="Pfeil nach rechts"(für einen Weiter-Button)Richtig:
alt="Nächste Seite"
8. Emotionen und Stimmung übertragen
Bilder erzeugen oft eine Atmosphäre oder einen emotionalen Eindruck. Dieser geht verloren, wenn man nur sachlich beschreibt. Sehende Menschen nehmen die Stimmung unbewusst wahr – auch diese Information verdienen sehbehinderte Menschen.
Schlecht:
alt="Frau sitzt am Fenster"Besser:
alt="Eine ältere Frau sitzt nachdenklich am Fenster einer rustikalen Wohnung. Regen läuft an der Scheibe herunter."Schlecht:
alt="Gruppe von Menschen"Besser:
alt="Eine Gruppe junger Menschen feiert gemeinsam auf einer begrünten Dachterrasse. Alle lachen ausgelassen. Ein eng umschlungenes Pärchen zeigt auf den Sonnenuntergang."
9. Informative Bilder: Inhalt und Kontext beschreiben
Beschreiben, was das Bild zeigt – aber immer mit Blick auf die Seite, auf der es steht. Die Frage ist nicht allein „Was sehe ich?", sondern zusätzlich „Was soll dieses Bild an genau dieser Stelle aussagen?". Auch kann dasselbe Bild auf verschiedenen Seiten einen anderen Alt-Text benötigen. Der Fokus wird gesetzt, indem die für den Kontext wichtigen Details beschrieben werden – andere dürfen dabei in den Hintergrund treten.
Produktbild in einem Shop:
alt="Eine rote Lederhandtasche mit Schultergurt. Vorne ist ein Reißverschlussfach. Der Verschluss ist mit einem goldenen X verziert."Dass die Tasche auf einem Tisch in einem Studio mit Interieur präsentiert wird, ist hier unwichtig und darf weggelassen werden.Teamfoto auf der Kontakt-Seite:
alt="Fünfköpfiges Entwicklungsteam beim Kickoff-Meeting. Sie sind in einem modernen Büro mit Pflanzen. Alle wirken dynamisch und blicken in die Kamera."Eine genaue Beschreibung der Personen ist hier nicht notwendig, da es nicht um die Vorstellung des Teams geht.Foto eines Arztes auf der Team-Seite einer Klinik:
alt="Der junge Arzt Dr. Mustermann im weißen Kittel und ein Patient. Der sportlich wirkende Arzt hat einen Schnauzbart und trägt eine blaue Brille. Die beiden unterhalten sich in einem hellen Sprechzimmer."Hier ist es wichtig, die Person aus dem Team genauer zu beschreiben.Dasselbe Foto auf einer Seite über Patientenversorgung:
alt="Arzt-Patienten-Gespräch in einer freundlichen, hellen Praxisatmosphäre. Der Arzt hält eine Akte in der Hand. Er erklärt dem Patienten Details der Behandlung."Hier sind Atmosphäre und Interaktion wichtig.
10. Infografiken – wenn die figcaption übernimmt
Infografiken, Diagramme und andere komplexe Bilder brauchen eine zweiteilige Lösung: einen kurzen Alt-Text, der das Bild benennt, und eine ausführliche Beschreibung an anderer Stelle, meist in der Bildunterschrift (figcaption).
Die Aufgabenteilung funktioniert so:
Alt-Text → benennt das Bild knapp und präzise. Er ist im Normalfall unsichtbar und wird vom Screenreader vorgelesen bzw. an eine Braille-Zeile übergeben.
figcaption → liefert die ausführliche Erklärung. Sie ist für alle sichtbar auf der Seite – also für sehende und sehbehinderte Nutzer gleichermaßen.
Da ein Grundprinzip der Barrierefreiheit ist, allen Nutzern dieselben Inhalte zugänglich zu machen, ist die figcaption die bevorzugte Lösung für komplexe Bildbeschreibungen – sichtbar auf der Seite, direkt beim Bild.
Alt-Text und figcaption erfüllen dabei unterschiedliche Aufgaben und sollten nie denselben Inhalt haben: Der Alt-Text ersetzt das Bild, die figcaption ergänzt es.
Beispiel für eine Infografik
Siehe Ablaufdiagramm
Häufige Fehler auf einen Blick
Alt-Attribut komplett vergessen → Screenreader liest Dateinamen vor.
alt="Bild",alt="Foto",alt="image"→ nichtssagend und Dopplung bei ScreenreadernWichtige Bildinhalte (Diagramme, Infografiken) zu knapp beschrieben → wichtige Information geht verloren.
Bei Diagrammen oder Infografiken vergessen, Zusatzinformationen und Erklärungen in die
figcaptionzu schreiben → wichtige Information geht verloren.Bei einem Logo, das auf die Startseite verlinkt diese zusätzliche Information vergessen → Screenreader-Nutzende finden den Link zurück zur Startseite nicht.
Dekorative Bilder mit einem Beschreibungstext versehen → stört den Lesefluss unnötig
Emojis werden benutzt → Es wird z. B. „Rotes Kreuz“ vorgelesen. Wenn „falsch“ gemeint ist, sollte auch „falsch“ geschrieben werden. Alt-Texte sollten aus reinem Text bestehen.
Ablaufdiagramm für einen guten Alt-Text
Das Ablaufdiagramm zeigt die wichtigsten Entscheidungswege bei der Erstellung von Alt-Texten:
1. Entscheidung: Ist das Bild rein dekorativ? Kein relevanter Inhalt, nur für die Optik
Ja: alt="" setzen: Screenreader überspringt
2. Entscheidung: Enthält das Bild Text? Schriftzug, Slogan, Zahl
Ja: Text wortwörtlich in den Alt-Text, weiter zu 3.
3. Entscheidung: Ist es ein Logo? Marke, Symbol, Wortmarke
Ja: Symbol und Text des Logos beschreiben z. B. "Pfeil in Blau-Grün", weiter zu 4.
4. Entscheidung: Löst das Bild eine Aktion aus? Button, Link, Icon
Ja: Funktion beschreiben z. B. "Suche starten", "Öffnet Startseite"
5. Transportiert das Bild eine Stimmung?
Ja: Atmosphäre mit einbeziehen z. B. "nachdenklich"
6. Entscheidung: Ist es eine Infografik oder ein Diagramm?
Ja: Kernaussage beschreiben, Details in Bildunterschrift
Nein: Bildinhalt beschreiben: Was ist zu sehen? Was ist die Aussage im Kontext?
Alt="Infografik mit einem Entscheidungsbaum zur Erstellung von Alternativtexten für Bilder. Ein hellgrünes Rechteck mit mehreren schwarzen beschrifteten Kästen und Pfeilen, die auf beschriftete, dunkelgrüne Kästen zeigen."
1. Wer oder was ist zu sehen?
Benennen Sie das Hauptmotiv klar und konkret. Nicht „ein Tier", sondern die genaue Art. Nicht „eine Person", sondern – wenn relevant und bekannt – wer diese Person ist oder welche Rolle sie hat.
2. Ausdruck und Stimmung
Beschreiben Sie, wie das Motiv im Bild wirkt – ist der Gesichtsausdruck neutral, fröhlich, erschöpft? Diese Informationen sind relevante visuelle Details, die Sehende unbewusst aufnehmen und die sehbehinderten Menschen genauso zustehen.
3. Kontext und Situation
Wo befindet sich das Motiv? Was passiert gerade? Der Ort und die Handlung geben dem Bild seinen Sinn.
4. Farbe – wenn sie relevant ist
Farbe muss nicht immer im Detail beschrieben werden. Wenn sie aber wichtig ist – etwa bei einem Produkt, einem Logo oder einem Muster – gehört sie in den Alt-Text. Bei Mustern: erst die Grundfarbe, dann die Musterfarbe.
5. Besondere Details
Was macht das Bild einzigartig oder überraschend? Gibt es ein Detail, das beim Betrachten auffällt oder eine Geschichte erzählt? Genau dieses Detail gehört in den Alt-Text.
Beispiel: Ein Teamfoto auf einer Unternehmenswebsite
Alt-Text für dieses Foto
Die nachfolgenden Erläuterungen gelten nur für das Foto ohne die darauf gelegten Textbausteine.
Falsch: Zu knapp: „Gruppe von Personen im Büro"
Richtig: Mit allen Bausteinen: „Fünf Teammitglieder stehen lachend um einen Laptop in einem hell eingerichteten Büro. Alle blicken auf den Bildschirm. Die Stimmung wirkt ausgelassen und kollegial."
Wer? → Fünf Teammitglieder – Anzahl und Beschreibung
Ausdruck? → lachend, ausgelassen – die positive Energie des Bildes
Kontext? → um einen Laptop, modernes Büro
Farbe? → hell eingerichtet – relevant für die Gesamtatmosphäre
Besonderes Detail? → alle blicken gemeinsam auf denselben Bildschirm – erzeugt das Gemeinschaftsgefühl
Kurz zusammengefasst
Alt-Texte sollten in einfacher Sprache mit korrekter Interpunktion geschrieben sein – Kommata und Punkte helfen dem Screenreader, den Text natürlich und verständlich vorzulesen. Die fünf Bausteine sind kein Pflichtprogramm, das immer vollständig abgehakt werden muss. Sie sind eine Orientierungshilfe, um sicherzustellen, dass ein Bild nach dem Lesen des Alt-Textes im Kopf der Person entsteht – so vollständig und lebendig wie beim Betrachten.
Digitale Barrierefreiheit ist keine Aufgabe, die an einer einzelnen Person hängen sollte. Content-Erstellende sind dafür verantwortlich, dass nicht nur die Hülle, sondern auch der Inhalt der Website barrierefrei ist – dazu gehören Alt-Texte genauso wie verständliche Texte oder Untertitel für Videos.
Eine einfache Regel hilft, das im Alltag umzusetzen:
Wer das Bild auswählt, liefert den Alt-Text mit.
Das ist keine Mehrarbeit – es ist sogar einfacher. Denn wer ein Bild bewusst ausgewählt hat, weiß auch, warum es dort steht und was es aussagen soll. Im besten Alt-Text steckt genau dieses Wissen. Wer das Bild hingegen nur hochlädt, ohne den Kontext zu kennen, kann bestenfalls beschreiben, was zu sehen ist – aber nicht, warum.
Für die Praxis bedeutet das:
Bilder werden intern immer zusammen mit einem Alt-Text weitergegeben – als fester Bestandteil, nicht als optionaler Zusatz.
Wer ein Bild von jemand anderem bekommt, fragt aktiv nach dem Alt-Text, falls er fehlt.
Ist ein Alt-Text unpassend oder zu dünn, wird er zurückgegeben – ohne Vorwurf. Gute Alt-Texte zu schreiben ist eine Fähigkeit, die sich entwickelt, und diese Anleitung hier ist ein erster Schritt dazu.
Ein letzter Gedanke dazu: Alt-Texte nachträglich für hunderte Bilder zu schreiben kostet erheblich Zeit. Es lohnt sich also, die Gewohnheit von Anfang an einzubauen – als normalen Teil des Prozesses, so selbstverständlich wie das Speichern einer Datei.