Bild ohne Alternativtext (image-alt)

Die Regel image-alt meldet <img>-Elemente ganz ohne Textalternative. Assistive Technik kann dann nur „Bild“ oder den Dateinamen vorlesen. Die Lösung ist ein alt-Attribut an jedem Bild: eine kurze Beschreibung, wenn das Bild eine Information trägt, und ein leeres alt="", wenn es reine Dekoration ist.

Was die Regel bedeutet

WCAG 1.1.1 verlangt für jeden Nicht-Text-Inhalt, der etwas vermittelt, eine Textalternative. Bei einem <img> ist das fast immer das alt-Attribut. Die Alternative sagt, was das Bild an dieser Stelle der Seite beiträgt – sie beschreibt nicht jedes Detail.

axe akzeptiert als Textalternative: ein alt-Attribut (auch ein leeres), aria-label, aria-labelledby, ein title-Attribut oder role="none"/role="presentation". Gemeldet wird ein Bild, das nichts davon hat, und ein alt, das nur ein Leerzeichen enthält – das ignorieren nicht alle Screenreader. Bilder, die mit aria-hidden="true" oder display: none verborgen sind, prüft die Regel nicht.

Was axe nicht kann: das Bild ansehen. alt="IMG_2041.jpg", alt="Bild" oder die Beschreibung des falschen Fotos bestehen die Prüfung. Ob der Text stimmt, beurteilt ein Mensch – deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Blinde Menschen mit Screenreader oder Braillezeile hören „Grafik“ oder einen Dateinamen statt des Inhalts. Wer eine langsame Verbindung hat oder Bilder abschaltet, sieht den Alternativtext an Stelle des Bildes, und wer per Sprache steuert, kann einen Bildlink ohne Text nicht benennen. Fehlende Alternativtexte sind der zweithäufigste Fehler im Web: Die WebAIM Million 2026 fand sie auf 53,1 % der eine Million meistbesuchten Startseiten ^[3].

Warum die Prüfung anschlägt

• Uploads im CMS, bei denen das Feld „Alternativtext“ optional ist und leer bleibt – das Template gibt dann <img> ganz ohne alt aus.
• Themes und Seitenbaukästen, die Produkt-, Teaser- oder Teambilder ohne alt-Attribut ausgeben, selbst wenn die Redaktion eines eingetragen hat.
• Slider, Galerien und Lazy-Loading-Skripte, die <img>-Elemente per JavaScript erzeugen und das Attribut verlieren.
• Verlinkte Bilder – ein Logo oder eine Produktkachel in einem <a> ohne alt. Dann hat auch der Link keinen Namen.
• Zählpixel und Platzhalterbilder (1 × 1 px), die axe sieht und die alt="" brauchen.

So beheben Sie es

1. Entscheiden Sie pro Bild: Trägt es eine Information, die der Text daneben nicht enthält? Dann beschreiben Sie diese Information knapp. Wenn nicht: alt="".
2. Bei einem verlinkten Bild nennt das alt das Linkziel („Startseite“, „Laufschuh Aero 3 – Details“), nicht das Motiv.
3. Beheben Sie es dort, wo das Markup entsteht – im Template oder in der Komponente – und machen Sie das Feld für Alternativtexte bei Inhaltsbildern im CMS zur Pflicht.

<!-- Vorher: kein alt – Screenreader lesen den Dateinamen vor -->
<img class="team-foto" src="/bilder/team-berlin.jpg" width="640" height="360">
<!-- Eine dekorative Trennlinie, ebenfalls ohne alt -->
<img class="trenner" src="/bilder/trenner-welle.svg" width="200" height="12">

<!-- Nachher: das Foto ist im Zusammenhang beschrieben -->
<img class="team-foto" src="/bilder/team-berlin.jpg" width="640" height="360"
     alt="Unser sechsköpfiges Support-Team im Berliner Büro">
<!-- Dekorativ: alt="" – Screenreader überspringen das Bild -->
<img class="trenner" src="/bilder/trenner-welle.svg" width="200" height="12" alt="">

Ein komplexes Bild wie ein Diagramm bekommt ein kurzes alt und die vollständige Information im Text daneben oder in einer Datentabelle – nicht in einem Attribut mit 300 Wörtern.

So prüfen Sie es von Hand

1. Lassen Sie sich die Bilder der Seite anzeigen – im Barrierefreiheits-Inspektor von Firefox oder mit dem kostenlosen Browser-Werkzeug WAVE, das den Alternativtext neben jedes Bild schreibt.
2. Lesen Sie jeden Alternativtext, ohne auf das Bild zu schauen. Erfahren Sie, was Sie an dieser Stelle wissen müssen?
3. Prüfen Sie verlinkte Bilder und Bild-Buttons: Sagt die Alternative, wohin der Link führt oder was der Button tut?
4. Schalten Sie einen Screenreader ein (NVDA unter Windows, VoiceOver unter macOS) und gehen Sie die Seite durch. Achten Sie auf Dateinamen, „Grafik“ oder Beschreibungen, die die Bildunterschrift wörtlich wiederholen.

Zugehöriges WCAG-Kriterium

1.1.1 Nicht-Text-Inhalt, Stufe A. Verwandt: 2.4.4 Linkzweck (im Kontext) für Bilder, die der einzige Inhalt eines Links sind, und 1.4.5 Bilder eines Textes für Text, der als Bild gesetzt ist.

So meldet Reviseberg diese Regel

Reviseberg führt image-alt auf jeder gecrawlten Seite bei 1280 px aus. Die Befundliste zeigt die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Bilder und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt und jede Seite, auf der das Bild vorkommt. Ein Logo im Header erscheint einmal pro Seite – eine Änderung im Template behebt alle.

Für fehlende Alternativtexte kann Reviseberg außerdem Alternativtexte per KI vorschlagen. Ein Vorschlag bleibt ein Vorschlag: Ein Mensch liest ihn, passt ihn an und nimmt ihn an oder lehnt ihn ab. Nichts wird automatisch in Ihre Website geschrieben. Befunde, die Sie anders sehen, markieren Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“; jede Entscheidung wird protokolliert. Ein sauberes Ergebnis markiert 1.1.1 nie als bestanden – ob die Alternativen stimmen, bestätigt nur ein Mensch.

Verwandte Regeln

• undefined – Bild-Buttons (<input type="image">) ohne Textalternative.
• undefined – Elemente mit role="img" ohne Namen.
• undefined – eingebettete SVG-Grafiken ohne Textalternative.
• undefined – Links ohne Text, oft ein Bildlink ohne alt.

Alle Bilder ohne Alternativtext auf Ihrer Website finden – kostenloser Scan