Alt-Texte richtig schreiben: Anleitung für BFSG-konforme Bildbeschreibungen

Was sind Alt-Texte und warum sind sie Pflicht?

Alt-Texte (alternative Texte) beschreiben den Inhalt eines Bildes für Menschen, die das Bild nicht sehen können. Screenreader lesen den Alt-Text vor, Suchmaschinen nutzen ihn für die Bildersuche, und bei langsamer Internetverbindung erscheint der Alt-Text als Platzhalter, während das Bild lädt.

Die rechtliche Grundlage ist eindeutig: WCAG SC 1.1.1 (Non-text Content) verlangt, dass jeder nicht-textliche Inhalt eine Textalternative erhält, die denselben Zweck erfüllt. Diese Anforderung gehört zu den Level-A-Kriterien – dem absoluten Minimum. Über die Verweiskette § 3 Abs. 1 BFSG → § 4 BFSG → EN 301 549 → WCAG 2.1 Level AA ist SC 1.1.1 damit auch in Deutschland verbindlich.

Fehlt ein Alt-Text oder ist er nichtssagend, ist das ein direkter BFSG-Verstoß. Bei automatisierten Tests zählt jedes Bild ohne Alt-Text als einzelner Fehler – eine Seite mit 20 Bildern ohne Alt-Text hat also 20 Verstöße. Prüfe deine Seite jetzt auf fehlende Alt-Texte.

WCAG SC 1.1.1 im Detail: Was genau ist gefordert?

SC 1.1.1 unterscheidet verschiedene Situationen für nicht-textliche Inhalte. Für jede gibt es eine eigene Anforderung: Weitere Informationen finden Sie im Alt-Texte Glossar.

• Informative Bilder: Der Alt-Text muss die Information vermitteln, die das Bild transportiert. Er muss nicht das Bild visuell beschreiben, sondern dessen Zweck im Kontext wiedergeben.
• Funktionale Bilder: Bei Bildern, die als Link oder Button fungieren (z. B. ein Lupen-Icon für die Suche), beschreibt der Alt-Text die Funktion, nicht das Aussehen. Also alt="Suche", nicht alt="Lupe".
• Dekorative Bilder: Rein dekorative Bilder erhalten ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen.
• Komplexe Bilder: Bei Diagrammen, Infografiken oder Karten reicht ein kurzer Alt-Text nicht aus. SC 1.1.1 verlangt dann eine ausführliche Textalternative – entweder im umgebenden Text oder über einen Verweis auf eine separate Beschreibung.
• Text in Bildern: Enthält ein Bild lesbaren Text (z. B. ein Banner mit einem Slogan), muss der Alt-Text diesen Text wiedergeben. Besser: Verwende echten HTML-Text statt Bild-Text (SC 1.4.5, Images of Text).
• CAPTCHA: Audio-Alternative oder andere barrierefreie Verifizierung anbieten.

Der Entscheidungsbaum: Dekorativ, informativ oder funktional?

Bevor du einen Alt-Text schreibst, musst du entscheiden, welche Rolle das Bild auf der Seite spielt. Nutze diesen Entscheidungsbaum:

Schritt 1: Transportiert das Bild eine Information, die im umgebenden Text nicht bereits enthalten ist? → Falls nein: Das Bild ist dekorativ. Setze alt="".

Schritt 2: Ist das Bild anklickbar (Link, Button)? → Falls ja: Das Bild ist funktional. Der Alt-Text beschreibt die Funktion (z. B. „Zum Warenkorb“, „PDF herunterladen“, „Zur Startseite“).

Schritt 3: Zeigt das Bild Daten, Abläufe oder komplexe Zusammenhänge? → Falls ja: Es ist ein komplexes Bild. Kurzer Alt-Text plus ausführliche Textalternative (z. B. unter dem Bild oder als verlinktes Dokument).

Schritt 4: In allen anderen Fällen ist das Bild informativ. Beschreibe den Inhalt und seinen Zweck im Kontext der Seite.

Gute vs. schlechte Alt-Texte: Praxis-Beispiele

Die häufigsten Fehler bei Alt-Texten sind: zu generisch, redundant oder schlicht fehlend. Hier konkrete Beispiele für verschiedene Situationen:

Produktfotos

Schlecht: alt="Bild" oder alt="Produkt" oder alt="IMG_4523.jpg"

Besser: alt="Roter Laufschuh Nike Air Max 90"

Optimal: alt="Roter Nike Air Max 90, Seitenansicht, weiße Sohle, Größe 42" – Material, Farbe, Perspektive, relevante Details.

Team-Fotos

Schlecht: alt="Foto" oder alt="Team"

Optimal: alt="Joshua Kantner, Gründer von bf-check.de, im Büro" – Name, Rolle und Kontext.

Icons und Buttons

Schlecht: alt="Icon" oder alt="Bild eines Einkaufswagens"

Optimal: alt="Warenkorb (3 Artikel)" – Funktion, nicht Aussehen. Ein Screenreader kündigt bereits an, dass es sich um ein Bild handelt – „Bild von...“ wäre redundant.

Infografiken und Diagramme

Schlecht: alt="Diagramm" oder alt="Infografik.png"

Optimal: alt="Balkendiagramm: Anteil BFSG-konformer Webseiten stieg von 12 % (2024) auf 34 % (2026)" – Die Kernaussage, nicht die visuelle Beschreibung. Biete zusätzlich eine Datentabelle unterhalb der Grafik an.

Screenshots

Schlecht: alt="Screenshot"

Optimal: alt="Screenshot des bf-check.de Scan-Ergebnisses: 3 kritische Fehler bei Alt-Texten gefunden" – Was zeigt der Screenshot und warum ist er relevant?

Logos

Schlecht: alt="Logo"

Optimal: alt="bf-check.de" – Der Firmenname reicht. Wenn das Logo ein Link zur Startseite ist, beschreibt der Alt-Text die Link-Funktion: alt="bf-check.de – Zur Startseite".

Wann der Alt-Text leer sein darf – und wann nicht

Dekorative Bilder, die keinen inhaltlichen Mehrwert bieten, bekommen ein leeres Alt-Attribut: alt="". Das signalisiert dem Screenreader: Dieses Bild kann übersprungen werden. Typische Fälle für leere Alt-Texte:

• Trennlinien und Schmuckelemente: Horizontale Linien, Eckverzierungen, Hintergrundmuster.
• Stimmungsbilder neben Text: Wenn der umgebende Text die Information bereits vollständig vermittelt und das Bild rein illustrativ ist.
• Icons neben beschriftetem Text: Ein Lupen-Icon neben dem Wort „Suche“ – die Information ist bereits im Text enthalten.
• CSS-Hintergrundbilder: Diese haben kein alt-Attribut. Falls sie informativ sind, muss die Information auf anderem Weg verfügbar gemacht werden.

Kritisch: alt="" (leerer Alt-Text) ist nicht dasselbe wie ein fehlendes alt-Attribut. Ohne alt-Attribut lesen viele Screenreader den Dateinamen vor – z. B. „IMG_4523.jpg“ oder „header-banner-final-v3.png“. Das ist verwirrend, nutzlos und ein direkter Verstoß gegen WCAG SC 1.1.1.

Im Zweifelsfall: Lieber einen kurzen beschreibenden Alt-Text setzen als das Bild fälschlicherweise als dekorativ zu markieren.

Title-Attribut vs. Alt-Attribut: Kein Ersatz

Ein häufiges Missverständnis: Das title-Attribut sei ein Ersatz für alt. Das ist falsch und gefährlich.

Das alt-Attribut ist die primäre Textalternative. Screenreader lesen es vor. Es erscheint als Fallback, wenn das Bild nicht lädt. Es ist Pflicht gemäß WCAG SC 1.1.1.

Das title-Attribut erzeugt einen Tooltip beim Hover mit der Maus. Screenreader behandeln es inkonsistent – manche lesen es vor, manche ignorieren es, manche lesen es nur auf explizite Nutzeranfrage. Auf Mobilgeräten gibt es keinen Hover, also ist der Tooltip dort unsichtbar.

Fazit: Setze immer ein alt-Attribut. Verwende title höchstens als ergänzende Information – niemals als einzige Beschreibung. In der Praxis raten viele Barrierefreiheits-Experten dazu, title bei Bildern komplett wegzulassen, weil es mehr Verwirrung stiftet als Nutzen bringt.

Alt-Texte für spezielle Bildformate

SVG-Grafiken

SVG-Elemente haben kein alt-Attribut. Stattdessen nutzt du:

• Ein <title>-Element innerhalb des <svg>-Tags für den zugänglichen Namen.
• role="img" auf dem <svg>-Element.
• aria-labelledby, das auf die ID des <title>-Elements verweist.

Für dekorative SVGs: aria-hidden="true" und focusable="false" setzen. Mehr über ARIA-Attribute und ihre korrekte Verwendung.

Responsive Images mit srcset

Bei <img>-Elementen mit srcset bleibt der Alt-Text derselbe – er wird nur einmal im alt-Attribut gesetzt und gilt für alle Auflösungsvarianten. Das <picture>-Element mit verschiedenen <source>-Tags verhält sich gleich: Der Alt-Text steht auf dem Fallback-<img>.

Bilder in PDFs

Alt-Texte sind nicht nur im Web relevant. Auch barrierefreie PDFs benötigen Textalternativen für jedes Bild. In Adobe Acrobat setzt du sie über die Tag-Eigenschaften; in Word über Rechtsklick → Alternativtext.

Bild-Links und Image Maps

Wenn ein Bild als Link fungiert, beschreibt der Alt-Text das Linkziel, nicht das Bild. Bei einer Image Map (<map>) braucht jeder <area>-Bereich einen eigenen Alt-Text, der die jeweilige Funktion beschreibt.

Alt-Texte in CMS-Systemen setzen

Jedes gängige CMS bietet Möglichkeiten, Alt-Texte zu pflegen – aber die Umsetzung variiert stark:

• WordPress: Beim Bild-Upload im Feld „Alternativtext“ in der Mediathek. Der Alt-Text wird automatisch in den <img>-Tag übernommen. Tipp: Auch nachträglich änderbar über Medien → Bibliothek.
• Shopify: In der Medien-Bibliothek unter „Alt-Text bearbeiten“. Bei Produktbildern: Im Produkt-Editor auf das Bild klicken und Alt-Text eingeben.
• WooCommerce: Im Produkt-Editor unter „Produktbilder“. Galerie-Bilder: Jedes Bild einzeln anklicken, um den Alt-Text zu setzen.
• Shopware: Im Medienmanager unter „Alt-Tag“. Achtung: Shopware 6 unterscheidet zwischen dem Alt-Text in der Mediathek und dem auf der Produktseite – prüfe beide.
• Wix: Rechtsklick auf das Bild → „Alt-Text hinzufügen“. Bei Wix-Galerien: Jedes Bild in der Galerie einzeln bearbeiten.
• Webflow: Im Asset-Manager oder direkt im Element-Panel. Bei CMS-Collections ein separates Textfeld für Alt-Texte anlegen – Webflow hat kein Pflichtfeld-Feature dafür.
• TYPO3: Im Dateimanager über die Metadaten des Bildes (Feld „Alternative“). Bei Content-Elementen zusätzlich im Reiter „Medien“.

Wichtig bei allen Systemen: Alt-Texte, die in der Mediathek gesetzt werden, sind oft nur Defaults. Prüfe, ob sie im jeweiligen Kontext (Produktseite, Blogartikel, Landingpage) noch passen. Ein und dasselbe Bild kann in verschiedenen Kontexten unterschiedliche Alt-Texte benötigen.

Häufige Fehler und wie du sie vermeidest

Neben dem offensichtlichen Fehler „kein Alt-Text“ gibt es subtilere Probleme, die bei einem Barrierefreiheits-Test auffallen:

• Keyword-Stuffing: alt="Schuh kaufen Schuhe online Shop Schuh günstig" – das ist Spam, kein Alt-Text. Screenreader-Nutzer müssen sich diesen Text anhören. Beschreibe das Bild, nicht deine SEO-Strategie.
• Identische Alt-Texte: Alle Produktbilder mit alt="Produktbild" – das ist kaum besser als gar kein Alt-Text. Jedes Bild braucht eine individuelle Beschreibung.
• Überlange Alt-Texte: Mehr als 125 Zeichen sind selten nötig. Wenn doch, nutze eine kurze Zusammenfassung im Alt-Text und eine ausführliche Beschreibung im umgebenden Text oder über aria-describedby.
• Alt-Text = Dateiname: CMS-Systeme übernehmen manchmal den Dateinamen als Default. alt="DSC_0042_final_cropped.jpg" ist kein hilfreicher Alt-Text.
• Redundanz zum Bildunterschrift: Wenn das Bild eine <figcaption> hat, sollte der Alt-Text nicht identisch sein. Der Alt-Text beschreibt das Bild; die Caption liefert Kontext.

Alt-Texte systematisch prüfen

Bei größeren Webseiten mit Hunderten von Bildern ist eine manuelle Prüfung zeitaufwändig. Nutze eine Kombination aus automatisierten und manuellen Tests:

• Automatisiert: Tools wie der bf-check.de Scanner erkennen fehlende Alt-Attribute, leere Alt-Texte bei informativen Bildern und verdächtig kurze Texte (z. B. nur ein Wort).
• Manuell: Prüfe stichprobenartig, ob die Alt-Texte inhaltlich korrekt sind. Ein automatisierter Test kann nicht beurteilen, ob alt="Rotes Kleid" tatsächlich ein rotes Kleid zeigt.
• Screenreader-Test: Lass dir eine Seite mit NVDA, JAWS oder VoiceOver vorlesen. So hörst du, wie sich deine Alt-Texte in der Praxis anhören und ob sie im Kontext Sinn ergeben.

Erstelle für dein Team eine Content-Guideline mit konkreten Beispielen für gute Alt-Texte – sortiert nach Bildtyp. So sorgst du für Konsistenz, auch wenn mehrere Personen Inhalte pflegen.

Hinweis: Dieser Artikel bietet allgemeine Informationen zur barrierefreien Bildauszeichnung und ersetzt keine Rechtsberatung. Für eine verbindliche Einschätzung deiner BFSG-Pflichten konsultiere eine auf IT-Recht spezialisierte Kanzlei. Die genannten WCAG-Kriterien beziehen sich auf WCAG 2.1, die als technische Grundlage des BFSG gilt.

Häufig gestellte Fragen