Fehlendes Alt-Attribut: Fehler erklärt und behoben
Also called: Bild ohne alt, Bilder ohne Alternativtext, Kein Alt-Attribut
Definition
Ein fehlendes Alt-Attribut bedeutet, dass ein img-Element (oder ein Bild-Button bzw. Bereich einer Imagemap) gar kein alt-Attribut hat. Assistive Technologien wissen dann nicht, ob das Bild wichtig oder dekorativ ist, und lesen unter Umständen den Dateinamen vor.
Ein fehlendes Alt-Attribut ist die Fehlermeldung für ein Bild-Tag ganz ohne alt-Attribut. Prüftools zeigen es als „Bild ohne alt-Attribut“, „Image missing alt attribute“ oder „Images must have alternate text“. Hier geht es um den Fehler selbst – wie Sie gute Bildbeschreibungen formulieren, erklärt der Eintrag zum Alternativtext.
Was es bedeutet
Über das alt-Attribut erfährt ein Screenreader, was ein Bild zeigt. Fehlt das Attribut vollständig, gibt es keinerlei Information – nicht einmal darüber, ob das Bild wichtig oder bloß Dekoration ist. Screenreader weichen dann unter Umständen auf den Dateinamen aus, und statt Inhalt hört man „IMG_4711.jpg“ oder „hero-banner-final-2.webp“.
WCAG 1.1.1 Nicht-Text-Inhalt ist ein Kriterium der Stufe A in WCAG 2.2: Jeder Nicht-Text-Inhalt braucht eine Textalternative mit gleichwertigem Zweck, rein dekorative Bilder müssen für assistive Technologien ausgeblendet sein. Das W3C nennt das Weglassen des alt-Attributs bei img, area und input type="image" ausdrücklich als Fehler F65. Auch Dateinamen oder Platzhalter als Alternativtext gelten als Fehler (F30).
| Markup | Meldung im Scanner | Bedeutung |
|---|---|---|
<img src="team.jpg"> |
Fehlendes Alt-Attribut | Keine Information – beheben |
<img src="linie.svg" alt=""> |
Kein Fehler | Dekorativ, wird korrekt übersprungen |
<img src="team.jpg" alt="Unser fünfköpfiges Team im Büro"> |
Kein Fehler | Informativ, beschrieben |
<img src="team.jpg" alt="IMG_4711.jpg"> |
Oft kein Fehler | Verletzt 1.1.1 trotzdem (F30) |
Praxisbeispiele
Der Fehler versteckt sich oft in Produktbildern, Logos und verlinkten Bildern. Ist das Bild der einzige Inhalt eines Links oder Buttons, entsteht durch das fehlende alt zusätzlich ein leerer Link oder ein leerer Button.
<!-- Fehler: kein alt-Attribut -->
<img src="/bilder/sneaker-rot.jpg">
<!-- Behoben: informatives Bild -->
<img src="/bilder/sneaker-rot.jpg" alt="Roter Laufschuh, Seitenansicht">
<!-- Behoben: dekoratives Bild -->
<img src="/bilder/trenner.svg" alt="">Für jedes Bild entscheiden: informativ → Inhalt oder Zweck beschreiben; dekorativ → alt="". Den Alternativtext in der Mediathek Ihres CMS hinterlegen, damit er überall verwendet wird, wo das Bild erscheint.
Das Attribut weglassen, den Dateinamen eintragen oder bei Dekorbildern „Bild“ bzw. „Abstandhalter“ schreiben – das W3C wertet das als Fehler (F39).
So beheben Sie ein fehlendes Alt-Attribut
Onlineshops trifft es besonders, weil jedes Produktfoto zählt. In Shopify und in WooCommerce unter WordPress legen Sie den Alternativtext pro Bild in der Mediathek oder beim Produkt fest.
Häufige Fragen
Was bedeutet „Bild ohne alt-Attribut“?
Das <img>-Tag hat überhaupt kein alt-Attribut. Screenreader haben keine Textalternative und lesen unter Umständen den Dateinamen vor.
Ist alt="" dasselbe wie ein fehlendes Alt-Attribut?
Nein. alt="" kennzeichnet ein Bild als dekorativ, Screenreader überspringen es – bei Schmuckbildern ist das richtig. Ein fehlendes Attribut ist ein Fehler, weil niemand entschieden hat, ob das Bild wichtig ist.
Brauchen dekorative Bilder ein alt-Attribut?
Ja, ein leeres: alt="". Fehlt es, ist WCAG 1.1.1 verletzt – das W3C führt das als Fehler F65.
Wie finde ich Bilder ohne Alternativtext?
Prüfen Sie Ihre Startseite mit dem kostenlosen WCAG-Scanner. Für ein einzelnes Bild genügt ein Rechtsklick und Untersuchen, um zu sehen, ob das Attribut vorhanden ist.
Kann allyWay fehlende Alt-Attribute automatisch beheben?
Ja. Die KI von allyWay sieht sich Ihre Bilder an, schreibt Alternativtexte, die beschreiben, was tatsächlich zu sehen ist, und setzt sie auf allen Seiten ein. Die automatischen Korrekturen laufen über das allyWay-Skript – Ihr CMS, Theme und Ihre Dateien bleiben unverändert, jede Korrektur wird protokolliert. Kostenlos starten und Ihre Bilder mit Alternativtexten versehen, ohne jedes einzeln zu bearbeiten.
Related terms
Alternativtext: Gute Alt-Texte für Bilder schreiben
Ein Alternativtext ist eine kurze Textbeschreibung eines Bildes im alt-Attribut. Screenreader lesen ihn vor, Browser zeigen ihn an, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um den Bildinhalt zu verstehen.
Read definition: Alternativtext: Gute Alt-Texte für Bilder schreibenLeerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenLeerer Button: Fehler verstehen und beheben
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Read definition: Leerer Button: Fehler verstehen und beheben