Dateiname: alt-texte-icons-dekorative-bilder-funktionale-grafiken.md

Meta Title: Alt-Texte für Icons & Bilder richtig schreiben | BFSG / WCAG

Meta Description: Wann braucht ein Icon einen Alt-Text, wann ist alt="" korrekt und wann braucht ein Button eher aria-label? Ein Praxisleitfaden für dekorative Bilder und funktionale Grafiken.

Alt-Texte für Icons, dekorative Bilder und funktionale Grafiken: Was gehört in den Alt-Text – und was nicht?

Bei Alt-Texten passieren in der Praxis nicht nur Auslassungen, sondern vor allem Fehlentscheidungen. Ein dekoratives Bild bekommt einen umständlichen Beschreibungstext, ein funktionales Icon wird mit seinem Aussehen statt seiner Aktion benannt, und bei komplexeren Grafiken landet entweder zu viel oder zu wenig Information im alt-Attribut. Für Nutzer von Screenreadern ist das unerquicklich: entweder unnötiges Rauschen oder fehlende Orientierung an genau den Stellen, an denen sie gebraucht wird.

Die gute Nachricht: Für die meisten Fälle reicht eine klare 80/20-Entscheidungslogik. Sie müssen nicht jedes Bild maximal detailliert beschreiben. Sie müssen vor allem sauber unterscheiden, welche Funktion ein Element auf der Seite hat:

dekorativ → nicht vorlesen lassen
informativ → wesentliche Information als Alt-Text bereitstellen
funktional → Aktion oder Ziel benennen, nicht die Optik
komplex → kurz im Alt-Text einordnen, Details im sichtbaren Text ergänzen

Genau diese Unterscheidung ist im SEO-Cluster „Bilder & Alt-Texte“ entscheidend. Sie hilft nicht nur bei WCAG und BFSG, sondern verbessert auch redaktionelle Prozesse, CMS-Qualität und die Konsistenz im Design-System.

Wenn Sie erst die Grundlagen zu Alternativtexten verstehen möchten, lesen Sie ergänzend Gute Alt-Texte schreiben: SEO & Barrierefreiheit. Für angrenzende Probleme bei textlosen Buttons ist außerdem Dekorative Bilder, Alt-Texte und Icon-Buttons: Was braucht aria-hidden, was braucht aria-label? relevant.

Die Grundregel: Der Alt-Text beschreibt nicht alles – sondern nur das, was für den Kontext zählt

Ein Alt-Text ist kein Ersatz für eine vollständige Bildanalyse. Er soll die Information transportieren, die ein sehender Nutzer aus dem Bild für das Verständnis der Seite oder die Bedienung der Oberfläche erhält.

Deshalb ist die erste Frage nicht: „Was sieht man auf dem Bild?“ Die bessere Frage lautet:

„Was müsste eine Person wissen, wenn sie das Bild nicht sehen kann?“

Diese Perspektive verhindert zwei typische Fehler:

Überbeschreibung: Das alt-Attribut enthält irrelevante Details, die nur Lärm erzeugen.
Unterbeschreibung: Der Alt-Text benennt nur das Motiv, aber nicht die relevante Information oder Funktion.

Ein Beispiel:

<img src="hero-checkliste.jpg" alt="Mann am Laptop" />

Das ist technisch ein Alt-Text, inhaltlich aber oft unbrauchbar. Wenn das Bild in einem Artikel über BFSG-Checks nur dekorativ neben der Überschrift steht, wäre sogar alt="" oft besser. Wenn es hingegen eine konkrete Prüfsituation zeigt, müsste der Alt-Text diese Information transportieren.

Quick-Test: So entscheiden Sie in 20 Sekunden, was in den Alt-Text gehört

Nutzen Sie für jedes Bild, Icon oder jede Grafik diese vier Fragen:

Ist das Element rein dekorativ? Dann meist alt="".
Vermittelt es eine fachlich relevante Information? Dann braucht es einen passenden Alt-Text.
Ist es Teil eines Buttons oder Links? Dann braucht das interaktive Element einen zugänglichen Namen – oft nicht per Alt-Text, sondern per sichtbarem Text oder aria-label.
Ist es komplexer als ein kurzer Satz? Dann gehört nur die Kurzeinordnung in den Alt-Text; die Details kommen in den Fließtext oder direkt unter die Grafik.

Diese Logik spart erstaunlich viel Zeit und verhindert den häufigsten Audit-Befund: „Alt-Text vorhanden, aber fachlich nicht passend“.

Dekorative Bilder: Was nicht in den Alt-Text gehört

Dekorative Bilder sind visuelle Ergänzungen ohne eigenständigen Informationswert. Dazu zählen zum Beispiel:

Hintergrundillustrationen
atmosphärische Stockfotos ohne fachliche Aussage
Trennmotive und Schmuckelemente
wiederholte Teaserbilder, deren Aussage bereits im Text daneben steht

Für solche Bilder ist ein beschreibender Alt-Text meistens falsch. Ein Screenreader-Nutzer gewinnt dadurch nichts, muss aber zusätzliche Ausgabe anhören.

Richtiges Pattern

<img src="deko-verlauf.png" alt="" />

Falsche Patterns

<img src="deko-verlauf.png" alt="abstrakte blaue Wellenform" />
<img src="deko-verlauf.png" alt="dekoratives Bild" />

Beides erzeugt nur akustischen Ballast. Gerade auf Marketingseiten mit Hero-Bildern, Kacheln und Illustrationen summiert sich dieser Fehler schnell.

Wann dekorative Bilder trotzdem Probleme machen

Ein Bild ist nicht automatisch dekorativ, nur weil es „schön gestaltet“ ist. Sobald es etwa einen Zustand, einen Produkttyp, einen Warnhinweis oder ein Ergebnis visualisiert, kann es inhaltlich relevant sein.

Faustregel:

Kann das Bild entfernt werden, ohne dass Verständnis oder Bedienung leiden? → dekorativ
Nein? → nicht dekorativ

Rund um Navigation und Interface-Elemente entstehen ähnliche Abgrenzungsfehler. Für die praktische Prüfung der Bedienung passt unser Beitrag Tastaturbedienung testen: Fokus, Tab-Reihenfolge & Skip-Links.

Icons: Warum „Lupe“, „Herz“ oder „Hamburger“ fast nie gute Alternativtexte sind

Bei Icons wird besonders oft das Falsche beschrieben. Ein Nutzer braucht selten die Form des Symbols. Er braucht die Bedeutung oder Funktion.

Beispiel: Such-Icon in einem Button

Schlecht:

<button>
  <img src="search-icon.png" alt="Lupe" />
</button>

Ein Screenreader-Nutzer hört dann im Zweifel nur „Lupe, Schaltfläche“. Das ist schwächer als nötig.

Besser:

<button aria-label="Suche öffnen">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">...</svg>
</button>

Hier wird nicht die Optik, sondern die Aktion kommuniziert.

Wichtige Unterscheidung

Icon als Bildinhalt → eventuell Alt-Text
Icon als Teil eines Bedienelements → meist zugänglicher Name für den Button/Link
Icon nur dekorativ neben vorhandenem Text → oft aria-hidden="true" oder alt=""

Ein typischer Fehler in Buttons, Menüs und Overlays ist, dass das Icon selbst beschriftet wird, aber nicht das interaktive Element. Wenn Sie dieses Problem systematisch prüfen wollen, lesen Sie auch Cookie-Banner barrierefrei: Tastatur, Fokus, Consent ohne Blocker, weil dort textlose Close-Icons und Schaltflächen besonders häufig falsch umgesetzt sind.

Funktionale Grafiken: In den Alt-Text gehört die Funktion oder Kernaussage – nicht die Oberfläche

Funktionale Grafiken sind Bilder, die eine Aufgabe erfüllen oder eine konkrete Information für die Handlung des Nutzers transportieren. Dazu zählen etwa:

verlinkte Logos
Bild-Buttons
Status- oder Warnsymbole mit fachlicher Bedeutung
Grafiken, die ein Ergebnis visualisieren
Diagramme oder Prozessgrafiken, die eine Aussage im Text tragen

Verlinktes Logo

Wenn ein Logo auf die Startseite verlinkt, ist nicht entscheidend, wie das Logo aussieht, sondern wohin die Interaktion führt.

Eher schwach:

<a href="/">
  <img src="logo.svg" alt="BFSG Webcheck Logo" />
</a>

Besser:

<a href="/">
  <img src="logo.svg" alt="BFSG Webcheck Startseite" />
</a>

Warnsymbol mit inhaltlicher Bedeutung

Wenn ein Warnsymbol einen echten Fehlerzustand markiert, sollte der Alt-Text die Bedeutung transportieren, nicht nur die Farbe oder Form.

Schlecht: alt="rotes Dreieck"

Besser: alt="Warnhinweis: Pflichtangabe fehlt"

Gerade in Formularen ist diese Differenz wichtig. Passend dazu: Kontaktformulare barrierefrei: Labels, Fehlermeldungen und typische BFSG-Fallen.

Komplexe Grafiken und Diagramme: Was in den Alt-Text gehört – und was daneben erklärt werden muss

Bei Diagrammen, Ablaufgrafiken und Infografiken wird häufig versucht, die gesamte visuelle Information in einen einzigen Alt-Text zu pressen. Das ist selten sinnvoll.

Besseres Vorgehen bei komplexen Grafiken

Der Alt-Text sollte hier nur die Art der Grafik und die zentrale Aussage knapp zusammenfassen. Die Detaildaten gehören in den umgebenden Text, eine Bildunterschrift oder einen direkt folgenden erklärenden Abschnitt.

Beispiel

Zu lang und unpraktisch:

<img src="report-chart.png" alt="Balkendiagramm mit zwölf Balken, Januar 14, Februar 17, März 22, April 19 ..." />

Pragmatischer:

<img src="report-chart.png" alt="Balkendiagramm zeigt deutlichen Rückgang kritischer Accessibility-Fehler über drei Monate; Details folgen im Text." />

Im Fließtext oder direkt darunter beschreiben Sie dann die relevanten Werte und Trends.

Das ist aus zwei Gründen besser:

Der Alt-Text bleibt verständlich und bedienbar.
Die eigentlichen Informationen sind für alle Nutzer sichtbar und nicht nur im Code versteckt.

Was ausdrücklich nicht in den Alt-Text gehört

Viele Teams wissen inzwischen, dass Alt-Texte wichtig sind. Schwieriger ist die Frage, was konsequent wegbleiben sollte. Diese fünf Muster sind besonders häufig:

1. Dateinamen oder Platzhalter

alt="icon-final-neu-2"
alt="bild123"
alt="image"

Das ist kein Informationsgewinn, sondern schlicht ein Qualitätsmangel.

2. Rein visuelle Details ohne Relevanz

alt="blaue, runde, moderne, minimalistische Linie"
alt="schönes Hintergrundbild mit Lichteffekt"

Wenn diese Details keinen inhaltlichen Beitrag leisten, gehören sie nicht hinein.

3. Das Symbol statt der Funktion

alt="Lupe"
alt="Papierkorb"
alt="Pfeil nach rechts"

Besser ist fast immer die Funktion: „Suche öffnen“, „Löschen“, „Zum nächsten Schritt“.

4. Redundanter Text, der direkt daneben schon steht

Wenn ein Button sichtbar „Jetzt Termin buchen“ heißt und daneben nur noch ein Kalender-Icon dekorativ angezeigt wird, muss das Icon nicht separat beschrieben werden.

5. Ganze Handlungsanweisungen oder SEO-Textblöcke

Alt-Texte sind kein Ort für Keyword-Stuffing, Marketing-Sprache oder Nebensätze, die eher in den Fließtext gehören.

Typische HTML-Muster: kurz richtig, kurz falsch

Dekoratives Bild

<img src="teaser-shape.svg" alt="" />

Informatives Bild

<img src="audit-screenshot.png" alt="Audit-Dashboard mit markierten Kontrast- und Formularfehlern" />

Textloser Icon-Button

<button type="button" aria-label="Menü öffnen">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">...</svg>
</button>

Link mit Bild und bereits vorhandenem Text

<a href="/scan">
  <img src="scan-icon.svg" alt="" />
  BFSG-Scan starten
</a>

Hier sollte das Bild nicht zusätzlich beschriftet werden, weil der Link bereits verständlich benannt ist.

Warum das für BFSG und WCAG praktisch relevant ist

Alt-Texte sind kein isoliertes SEO-Detail, sondern Teil der grundlegenden Zugänglichkeit nach WCAG. Im BFSG-Kontext sind sie deshalb relevant, weil Websites, Onlineshops und digitale Dienstleistungen Informationen nicht nur visuell vermitteln dürfen, wenn diese Information für Nutzung oder Verständnis erforderlich ist.

In Audits tauchen besonders häufig diese Probleme auf:

informative Bilder ohne sinnvollen Alt-Text
dekorative Bilder mit unnötigem Beschreibungstext
Icon-Buttons ohne zugänglichen Namen
komplexe Grafiken ohne sichtbare Erklärung

Wer diese vier Baustellen sauber löst, behebt bereits einen großen Teil typischer Non-Text-Content-Probleme. Für einen breiteren Überblick über schnelle Priorisierung lohnt sich auch WCAG & BFSG Quick Wins: 10 Fixes in 60 Minuten.

80/20-Umsetzung: Wo Sie zuerst prüfen sollten

Wenn Sie nicht jede Medienbibliothek manuell durchgehen möchten, priorisieren Sie so:

Buttons und Links mit reinen Icons – höchste Relevanz für Bedienbarkeit
Fehler-, Status- und Warnsymbole – direkt relevant für Prozesse und Formulare
Produkt- und Inhaltsbilder mit fachlicher Aussage – relevant für Verständnis und Conversion
Diagramme, Reports und Infografiken – häufig inhaltlich wichtig, aber schlecht dokumentiert
Hero- und Deko-Bilder – Alt-Texte bereinigen, unnötiges Rauschen entfernen

Das ist meist deutlich effizienter, als jedes Bild gleich zu behandeln.

Fazit: Der richtige Alt-Text beginnt mit der richtigen Frage

Die zentrale Frage lautet nicht „Braucht dieses Element irgendeinen Alt-Text?“, sondern:

„Welche Information oder Funktion verliert der Nutzer, wenn das Element nicht sichtbar ist?“

Daraus ergibt sich fast immer die richtige Entscheidung:

dekorativ → alt=""
informativ → kurze, kontextbezogene Aussage
funktional → Aktion oder Ziel benennen
komplex → Kernaussage im Alt-Text, Details sichtbar im Text erklären

Wenn Sie diese Logik in Redaktion, Design und Frontend konsistent anwenden, werden Screenreader-Ausgaben präziser, Oberflächen ruhiger und Accessibility-Audits deutlich sauberer.

CTA: Prüfen Sie Ihre Website auf typische Alt-Text- und Icon-Fehler

Wenn Sie herausfinden möchten, ob Ihre Website unnötige Alt-Texte, fehlende Beschriftungen bei Icon-Buttons oder unzureichend erklärte funktionale Grafiken enthält, starten Sie mit einem strukturierten Schnellcheck.

Jetzt BFSG-Scan starten

Quellen

Hinweis: Dieser Artikel stellt keine Rechtsberatung dar, sondern dient der allgemeinen Information.