Alternativtexte für Bilder: So schreiben Sie Alt-Texte, die helfen

Ein Alternativtext, kurz Alt-Text, ist die Textfassung eines Bildes. Blinde und sehbehinderte Menschen hören ihn über ihren Screenreader, Browser blenden ihn ein, falls ein Bild nicht geladen werden kann, und Suchmaschinen ziehen ihn heran, um Bildinhalte einzuordnen. Trotzdem fehlt er auf vielen Websites: Im Bericht „WebAIM Million 2026“ hatten 53,1 % der eine Million meistbesuchten Startseiten Bilder ohne Alternativtext.

Alt-Texte gehören zu den wenigen Barrieren, die Ihr Team ganz ohne Programmierkenntnisse beheben kann. Dieser Ratgeber zeigt, wie Sie schnell entscheiden, was in einen Alt-Text gehört – und was nicht.

Die Grundregel: Zweck statt Bildbeschreibung

Die Richtlinien für barrierefreie Webinhalte (WCAG) verlangen für jeden Inhalt, der kein Text ist, eine Textalternative, die denselben Zweck erfüllt. Ein Alt-Text beschreibt also nicht jedes Detail, sondern das, was das Bild an dieser Stelle der Seite leisten soll. Dasselbe Foto kann deshalb auf zwei Seiten zwei verschiedene Alt-Texte brauchen – oder auf einer davon gar keinen.

Für Unternehmen, die unter das Barrierefreiheitsstärkungsgesetz (BFSG) fallen, ist das mehr als eine Empfehlung: Als Maßstab gilt in der Praxis die Norm EN 301 549, die für Webinhalte die WCAG 2.1 auf Stufe AA übernimmt, und Textalternativen gehören zu deren Grundanforderungen. Allgemeine Information, keine Rechtsberatung.

Drei Fragen vor jedem Alt-Text

1. Ist das Bild Teil eines Links oder Buttons? Dann beschreibt der Alt-Text das Ziel oder die Funktion, nicht das Motiv. Ein Pfeil im Bildergalerie-Slider heißt „Nächstes Bild“, ein Korb-Symbol „Warenkorb“.
2. Enthält das Bild Text, der sonst nirgends steht? Dann gehört dieser Text in den Alt-Text. Steht er gleich daneben als echter Text, bleibt das Alt-Attribut leer.
3. Würde jemandem etwas fehlen, wenn das Bild verschwindet? Wenn ja, beschreiben Sie kurz das Wesentliche. Wenn nein, ist das Bild dekorativ und bekommt ein leeres Alt-Attribut, also alt="" ohne Leerzeichen dazwischen. Dann überspringen Screenreader es.

Wichtig ist der Unterschied zwischen leerem und fehlendem Alt-Attribut: Fehlt das Attribut ganz, lesen manche Screenreader stattdessen den Dateinamen oder die Bildadresse vor.

Beispiele aus dem Alltag

• Referenzfoto eines Sanitärbetriebs: Statt „Bad“ besser „Bodengleiche Dusche mit Glaswand und großformatigen grauen Fliesen“. Wer Referenzen zeigt, verkauft mit dem Bild, also gehört das Ergebnis der Arbeit in den Text.
• Produktbild im Online-Shop: Statt „Rucksack“ besser „Rucksack in Olivgrün, Rückansicht mit gepolsterten Schultergurten“. Beschreiben Sie, was für die Kaufentscheidung zählt, und unterscheiden Sie die Ansichten einer Bildergalerie.
• Eingang einer Arztpraxis: Auf der Seite „Anfahrt“ ist das Foto keine Dekoration. „Ebenerdiger Praxiseingang mit automatischer Schiebetür, daneben zwei Behindertenparkplätze“ beantwortet genau die Frage, die sich Patientinnen und Patienten stellen.
• Lageplan: Eine Karte lässt sich nicht in einem Satz beschreiben. Hier hilft ein kurzer Alt-Text wie „Lageplan mit Zufahrt und Parkplätzen, Wegbeschreibung im Text darunter“ – und die Wegbeschreibung als normaler Text auf der Seite.
• Veranstaltungsplakat eines Verbands: Wird das Plakat als Bild eingebunden, müssen Titel, Datum, Uhrzeit und Ort in den Alt-Text. Besser stehen die Angaben zusätzlich als Text auf der Seite.
• Teamfoto mit Namen in der Bildunterschrift: „Das Team der Buchhaltung im Besprechungsraum“ genügt. Die Namen nicht wiederholen, sonst hört man sie zweimal.
• Verlinktes Firmenlogo im Kopfbereich: „Mustermann GmbH, Startseite“ statt „Logo“. Wichtig sind Name und Ziel. Steht der Firmenname im selben Link schon als Text, bleibt das Alt-Attribut des Logos leer.

Die Beispiele sind bewusst allgemein gehalten. Entscheidend ist immer der Zusammenhang, in dem das Bild steht.

Länge und Stil

• Kurz und konkret: Meist reicht eine Wortgruppe oder ein kurzer Satz. Braucht ein Bild mehr Erklärung, etwa ein Diagramm, gehört die ausführliche Beschreibung als Text auf die Seite.
• Ohne „Bild von“: Screenreader kündigen ein Bild ohnehin an. Nur wenn die Art wichtig ist, etwa bei einer Zeichnung oder einem Gemälde, gehört sie dazu.
• Ohne Keyword-Listen: Google rät ausdrücklich davon ab, Alt-Attribute mit Suchbegriffen zu füllen. Das verschlechtere die Nutzererfahrung und könne dazu führen, dass die Website als Spam gilt.
• In der Sprache der Seite: Liefert eine Bilddatenbank englische Beschreibungen mit, übernehmen Sie diese nicht ungeprüft, sondern formulieren Sie den Alt-Text auf Deutsch.

Alt-Text, Bildunterschrift oder Title-Attribut?

Drei Felder, drei Aufgaben – und eine häufige Verwechslung:

• Alt-Text: Er ersetzt das Bild für alle, die es nicht sehen, und ist normalerweise unsichtbar.
• Bildunterschrift: Sie ist für alle sichtbar und ergänzt das Bild, etwa mit Namen, Ort oder Quelle. Alt-Text und Bildunterschrift sollten sich nicht wörtlich wiederholen.
• Title-Attribut: Es erzeugt einen Tooltip, wenn man mit der Maus über das Bild fährt. Wer mit Tastatur oder Touchscreen unterwegs ist, bekommt ihn meist nicht zu sehen. Die HTML-Spezifikation rät deshalb davon ab, sich auf das Title-Attribut zu verlassen. Als Ersatz für den Alt-Text taugt es nicht.

Alt-Texte im Redaktionssystem

Gängige Redaktionssysteme bieten beim Hochladen oder Einfügen eines Bildes ein Eingabefeld für den Alternativtext. Zwei Dinge sollten Sie dabei wissen:

• Wo wird der Text gespeichert? In WordPress etwa gehört der Alt-Text im Bild-Block zum jeweiligen Beitrag. Ändern Sie ihn später in der Mediathek, ändert sich das bereits eingefügte Bild nicht automatisch mit. Klären Sie für Ihr System, ob Änderungen zentral oder pro Seite wirken.
• Automatische Vorschläge gegenlesen: Manche Systeme und Erweiterungen schlagen Alt-Texte per KI vor oder übernehmen den Dateinamen. Ein Vorschlag kann helfen, kennt aber den Zusammenhang der Seite nicht. Lesen Sie jeden Text, bevor er live geht.

So prüfen Sie Ihre Seiten

1. Die kostenlose Browser-Erweiterung WAVE markiert auf der Seite selbst Bilder ohne Alt-Text und blendet die vorhandenen Alternativtexte ein.
2. Per Rechtsklick auf ein Bild und „Untersuchen“ sehen Sie im Code, was im Alt-Attribut steht.
3. Hören Sie sich eine Seite mit einem Screenreader an: NVDA gibt es kostenlos für Windows, VoiceOver ist auf Mac und iPhone eingebaut, TalkBack auf den meisten Android-Geräten vorinstalliert.

Checkliste für Ihr Team

• Link oder Button? Ziel oder Funktion beschreiben.
• Text im Bild? Den Text übernehmen, wenn er nicht daneben steht.
• Wichtige Information? Kurz das Wesentliche beschreiben.
• Nur Schmuck? Leeres Alt-Attribut, ohne Leerzeichen.
• Diagramm, Karte, Infografik? Kurzer Alt-Text plus ausführliche Beschreibung im Text.
• Kein „Bild von“, kein Dateiname, keine Keyword-Liste, keine Wiederholung der Bildunterschrift.
• KI-Vorschläge und importierte Beschreibungen gegenlesen.

Barrierefrei und besser auffindbar

Gute Alt-Texte nützen doppelt: Laut Googles Dokumentation fließen sie zusammen mit maschineller Bilderkennung und dem umgebenden Seiteninhalt in das Verständnis eines Bildes ein. Sie sind damit auch ein Beitrag zu Ihrer Auffindbarkeit.

Möchten Sie wissen, wie es um die Bilder und die übrigen Barrieren auf Ihrer Website steht? Im kostenlosen Barrierefreiheits-Check prüfen wir Ihre Startseite und eine wichtige Unterseite und sagen Ihnen verständlich, was Sie zuerst angehen sollten. Mehr dazu finden Sie auf der Seite Barrierefreiheit, anfragen können Sie den Check auch telefonisch unter 07551 839 91 30.