Alt-Texte richtig schreiben: 20 Beispiele aus der Praxis

Von 66,6 Millionen Bildern auf den analysierten Homepages hatten laut WebAIM 16,2 % keinen Alt-Text — bei verlinkten Bildern war es sogar jedes vierte. Das ist besonders ärgerlich, weil ein Link ohne Alt-Text für Screenreader-Nutzer:innen komplett unsichtbar wird: kein Text, kein Ziel, keine Information, dass dort überhaupt etwas anklickbar ist.

Die gute Nachricht: Alt-Texte sind eines der am schnellsten behebbaren WCAG-Kriterien. Dieser Leitfaden zeigt die Grundregel, 20 konkrete Beispiele nach Bildtyp und die Fehler, die selbst bei vorhandenem Alt-Text noch die häufigsten sind.

Was ist ein Alt-Text — und wofür ist er da?

Der Alt-Text steckt im alt-Attribut eines <img>-Tags: <img src="schuh.jpg" alt="Roter Laufschuh von der Seite">. Er hat drei Aufgaben, nicht nur eine:

1. Screenreader lesen ihn vor statt des Bildes — die einzige Möglichkeit für blinde und stark sehbehinderte Nutzer:innen, an die Bildinformation zu kommen.
2. Er springt ein, wenn das Bild nicht lädt — bei langsamer Verbindung, blockierten Bildern oder toten Links zeigt der Browser den Alt-Text an Stelle des Bildes an.
3. Suchmaschinen lesen ihn, um den Bildinhalt einzuordnen — ein Nebeneffekt, kein Ersatz für Punkt 1 und 2.

Rechtlich ist das keine Kür: WCAG 2.1, Erfolgskriterium 1.1.1 (Non-text Content) verlangt eine Textalternative für praktisch jeden nicht-textlichen Inhalt, und über EN 301 549 ist das seit dem BFSG vom 28. Juni 2025 für B2C-Websites verpflichtend.

Die Grundregel: Inhalt und Funktion, nicht „Bild von…"

Bevor die 20 Beispiele kommen, eine Faustregel, die die meisten Fehler von vornherein verhindert: Frag dich, was jemand wissen müsste, der das Bild nicht sehen kann — nicht, was auf dem Bild zu sehen ist. Das ist ein feiner, aber entscheidender Unterschied. Vier Bildtypen brauchen dabei unterschiedliche Herangehensweisen:

20 Praxisbeispiele nach Bildtyp

Produktbilder (E-Commerce)

Personen & Team-Fotos

Logos

Diagramme & Infografiken (komplexe Bilder)

Bei Diagrammen reicht der Alt-Text allein selten aus — er sollte kurz zusammenfassen, was die Grafik zeigt, während die eigentlichen Zahlen direkt daneben als Text oder Tabelle stehen. So kommt niemand um eine Information herum, nur weil er ein Bild nicht sehen kann.

Icons & Buttons (funktional)

Icon-Buttons sind oft kein <img>, sondern SVG oder eine Icon-Schrift — dann übernimmt aria-label am <button> die Rolle des Alt-Texts, das Icon selbst bleibt dekorativ (aria-hidden="true"). Die Logik ist identisch: Funktion beschreiben, nicht Aussehen.

Dekorative Bilder

Wichtig: alt="" ist nicht dasselbe wie ein fehlendes alt-Attribut. Fehlt es ganz, liest mancher Screenreader ersatzweise den Dateinamen vor — alt="" dagegen weist ihn an, das Bild komplett zu überspringen.

Screenshots (UI/Software)

Verlinkte Bilder (Link-Wrapped)

Bei verlinkten Bildern beschreibt der Alt-Text das Linkziel, nicht das Bild — das ist der Punkt, an dem laut WebAIM jedes vierte Bild scheitert. „Foto" oder „Logo" sagt niemandem, wohin der Klick führt.

Wann alt="" richtig ist

Alt-Text und SEO: zwei Fliegen mit einer Klappe

Ein Nebeneffekt guter Alt-Texte: Google liest sie mit, um Bilder in der Bildersuche einzuordnen und den Seiteninhalt besser zu verstehen. Der Effekt ist real, aber zweitrangig — ein Alt-Text, der für Suchmaschinen optimiert und für Menschen unlesbar ist (Keyword-Stuffing, siehe oben), verfehlt seinen eigentlichen Zweck und wird von modernen Ranking-Systemen inzwischen eher abgestraft als belohnt. Schreib zuerst für Screenreader-Nutzer:innen — die SEO-Wirkung stellt sich von selbst ein.

So testest du deine Alt-Texte

1. Bilder-Inspektion im Browser: Rechtsklick auf ein Bild → „Element untersuchen" zeigt das alt-Attribut direkt im HTML.
2. Browser-Erweiterung: Tools wie WAVE oder axe DevTools listen jedes Bild ohne Alt-Text auf einer Seite auf.
3. Automatischer Scan: Unser kostenloser Scanner findet fehlende und leere Alt-Texte auf deiner gesamten Website in 60 Sekunden — inklusive Angabe, welches Bild betroffen ist.

Was ein automatischer Scanner nicht bewerten kann: ob ein vorhandener Alt-Text inhaltlich stimmt. „Bild1234.jpg" wird als Fehler erkannt, ein falsch beschreibender Alt-Text wie „grüner Schuh" bei einem roten Schuh dagegen nicht — das bleibt eine manuelle Stichprobe wert.

Wie Alt-Texte in den größeren BFSG-Kontext passen, steht in unserer BFSG-Checkliste mit 12 Prüfpunkten; die technischen Grundlagen aller WCAG-Kriterien erklärt unser WCAG-2.1-Leitfaden.

Häufig gestellte Fragen (FAQ)

Was gehört in einen guten Alt-Text?

Der Inhalt und die Funktion des Bildes, nicht seine Bildunterschrift oder Dateiname. Bei informativen Bildern: kurz beschreiben, was zu sehen ist und worauf es ankommt. Bei verlinkten Bildern: das Linkziel nennen, nicht das Bild.

Wie lang darf ein Alt-Text sein?

Es gibt kein starres Zeichenlimit, aber ein bis zwei Sätze reichen fast immer. Screenreader lesen sehr lange Alt-Texte komplett vor, ohne Möglichkeit zum Überspringen — Kürze ist also auch eine Frage der Nutzbarkeit, nicht nur des Stils.

Muss jedes Bild einen Alt-Text haben?

Jedes <img>-Element muss ein alt-Attribut haben — aber nicht jedes muss beschreibenden Text enthalten. Dekorative Bilder bekommen bewusst alt="". Nur ganz fehlende Attribute sind ein Fehler.

Was ist der Unterschied zwischen alt="" und einem fehlenden Alt-Text?

alt="" ist eine bewusste Entscheidung: Screenreader überspringen das Bild vollständig. Fehlt das Attribut komplett, greifen manche Screenreader auf den Dateinamen zurück und lesen etwas wie „IMG 4213 JPG" vor — schlechter als gar nichts.

Wie schreibe ich Alt-Text für Diagramme und Infografiken?

Ein kurzer Alt-Text fasst zusammen, was die Grafik zeigt (z. B. „Balkendiagramm: Umsatzentwicklung 2023–2026"). Die eigentlichen Daten gehören zusätzlich als Text oder Tabelle auf die Seite, weil ein Alt-Text allein komplexe Informationen selten vollständig transportieren kann.

Verbessern Alt-Texte wirklich das SEO-Ranking?

Sie helfen Suchmaschinen, Bildinhalte einzuordnen, sind aber kein Freifahrtschein für Keyword-Stuffing. Ein für Menschen unlesbarer, überoptimierter Alt-Text verfehlt seinen eigentlichen Zweck und wirkt sich inzwischen eher negativ aus als positiv.

Wie viele Websites haben fehlende Alt-Texte?

Laut WebAIM-Million-Report 2026 hat mehr als jede zweite untersuchte Homepage (53,1 %) mindestens ein Bild ohne Alt-Text — der zweithäufigste Barrierefreiheits-Fehler im Web nach unzureichendem Farbkontrast.

Können Screenreader Alt-Texte automatisch aus dem Bild generieren?

Manche Screenreader und Browser bieten KI-generierte Bildbeschreibungen als Notlösung an, wenn der Alt-Text fehlt. Diese sind aber ungenau und ersetzen keinen manuell geschriebenen, kontextbezogenen Alt-Text — sie sind ein Fallback, kein Standard, auf den sich Website-Betreiber verlassen sollten.