So überprüfen Sie, ob ein Bild Alt-Text hat (4 einfache Methoden)

Warum Alt-Text wichtig ist

Alt-Text (alternativer Text) ist eine kurze schriftliche Beschreibung, die einem Bild in HTML über das alt-Attribut hinzugefügt wird. Er erfüllt zwei wichtige Zwecke: Er ermöglicht Screenreadern, Bilder für sehbehinderte Benutzer zu beschreiben, und er gibt Suchmaschinen Kontext, um zu verstehen, was ein Bild darstellt.

Laut dem WebAIM Million 2025 Report weisen 95,9 % der Startseiten erkennbare WCAG-Verstöße auf, und fehlender Alt-Text bleibt der häufigste Barrierefreiheitsfehler im Web. Für Website-Betreiber bedeutet dies, dass die meisten Websites Bilder enthalten, die von Screenreadern nicht beschrieben und von Suchmaschinen nicht verstanden werden können.

Gemäß WCAG 1.1.1 (Non-text Content) müssen alle aussagekräftigen Bilder beschreibenden Alt-Text enthalten, um die Konformitätsstufe A zu erreichen. Fehlender oder leerer Alt-Text bei informativen Bildern ist eine der häufigsten Barrierefreiheitsverletzungen, die heute im Web vorkommen.

Wie können Sie also tatsächlich überprüfen, ob ein Bild Alt-Text hat? Hier sind vier zuverlässige Methoden.

Methode 1: Seitenquelltext prüfen (Quelltext anzeigen)

Wie zeige ich den Seitenquelltext an, um Alt-Text zu finden?

Der einfachste Weg, Alt-Text zu überprüfen, ist die Anzeige des rohen HTML-Quelltextes einer Webseite:

1. Öffnen Sie die Seite in Ihrem Browser.
2. Klicken Sie mit der rechten Maustaste irgendwo und wählen Sie Seitenquelltext anzeigen (oder drücken Sie Strg+U / Cmd+U).
3. Verwenden Sie Strg+F / Cmd+F, um nach <img zu suchen.
4. Suchen Sie für jedes Bild-Tag nach dem alt-Attribut. Beispiel: <img src="foto.jpg" alt="Eine Frau liest ein Buch in einer Bibliothek">

Wenn das alt-Attribut fehlt oder vorhanden, aber leer ist (alt=""), benötigt dieses Bild möglicherweise Aufmerksamkeit. Beachten Sie, dass alt="" absichtlich für dekorative Bilder verwendet wird, die keine Bedeutung tragen – dies ist gemäß WCAG gültig und korrekt.

Methode 2: Browser-Entwicklertools verwenden (Element untersuchen)

Wie sieht das Alt-Attribut in den DevTools aus?

Für einen schnelleren, visuelleren Ansatz verwenden Sie die integrierten Entwicklertools Ihres Browsers:

1. Klicken Sie mit der rechten Maustaste direkt auf das Bild, das Sie überprüfen möchten.
2. Wählen Sie Untersuchen oder Element untersuchen.
3. Das DevTools-Panel wird geöffnet, wobei der HTML-Code des Bildes hervorgehoben ist.
4. Suchen Sie nach dem alt-Attribut im hervorgehobenen <img>-Tag.

Diese Methode ist besonders nützlich, wenn Sie schnell ein bestimmtes Bild überprüfen möchten, ohne den gesamten Seitenquelltext durchsuchen zu müssen. Sie können auch mit der Maus über das Bildelement im Elemente-Panel fahren, um eine Vorschau anzuzeigen, und der alt-Wert wird inline angezeigt.

Methode 3: Das WAVE Accessibility Tool verwenden

Wie hebt WAVE fehlenden Alt-Text hervor?

Die WAVE Browser-Erweiterung von WebAIM ist eines der am weitesten verbreiteten kostenlosen Tools zur Barrierefreiheitsprüfung. Wenn Sie sie auf einer beliebigen Webseite aktivieren, scannt WAVE die gesamte Seite und überlagert farbige Symbole direkt auf dem Inhalt. Ein rotes Symbol auf einem Bild weist auf ein fehlendes Alt-Attribut hin, was ein kritischer WCAG-Verstoß ist. Ein grünes Symbol bedeutet, dass das Bild Alt-Text hat. Ein gelbes Symbol kennzeichnet ein potenzielles Problem, z. B. Alt-Text, der verdächtig lang, dupliziert oder nur aus einem Dateinamen besteht. Die Erweiterung bietet auch eine Seitenleistenzusammenfassung, die die Gesamtzahl der Fehler, Warnungen und Strukturelemente anzeigt, und liefert Ihnen so eine sofortige Barrierefreiheitsübersicht der gesamten Seite, ohne dass Sie eine einzige Codezeile untersuchen müssen.

Das WAVE Web Accessibility Evaluation Tool (verfügbar als kostenlose Browser-Erweiterung oder unter wave.webaim.org) bietet eine visuelle Überlagerung auf Ihrer Seite, die Barrierefreiheitsprobleme kennzeichnet, einschließlich fehlendem Alt-Text.

1. Installieren Sie die WAVE Browser-Erweiterung (Chrome oder Firefox).
2. Navigieren Sie zu der Seite, die Sie überprüfen möchten.
3. Klicken Sie auf das WAVE-Erweiterungssymbol.
4. WAVE überlagert Symbole auf der Seite – ein rotes Symbol mit einem Ausrufezeichen zeigt einen Fehler wegen fehlendem Alt-Text bei einem Bild an.
5. Klicken Sie auf ein beliebiges Symbol, um weitere Details zum spezifischen Problem zu erhalten.

WAVE zeigt auch eine Zusammenfassung der Fehler an, sodass Sie auf einen Blick sehen können, wie viele Bilder auf der Seite keinen Alt-Text haben.

Methode 4: Alt Audit für eine Website-weite Prüfung verwenden

Kann ich Alt-Text auf meiner gesamten Website auf einmal überprüfen?

Die drei oben genannten Methoden eignen sich hervorragend zur Überprüfung einzelner Bilder oder Seiten, aber was ist, wenn Sie Ihre gesamte Website auf einmal überprüfen müssen? Hier kommt Alt Audit ins Spiel.

Alt Audit scannt Ihre gesamte Website und erstellt einen umfassenden Bericht über jedes Bild, dem Alt-Text fehlt, das ein leeres Alt-Attribut hat (wo es nicht sein sollte) oder das einen möglicherweise zu kurzen, zu langen oder automatisch generierten Alt-Text hat. Dies spart Stunden manueller Arbeit und liefert Ihnen eine priorisierte Aktionsliste zur Behebung Ihrer Barrierefreiheitsprobleme.

Mit Alt Audit können Sie:

• Tausende von Bildern auf Ihrer gesamten Domain in wenigen Minuten scannen.
• Genau sehen, auf welchen Seiten und bei welchen Bildern Alt-Text fehlt.
• KI-gestützte Vorschläge nutzen, um automatisch beschreibenden Alt-Text zu generieren.
• Ihren Fortschritt im Laufe der Zeit verfolgen, während Sie Probleme beheben.

Schneller Vergleich: Alle 4 Methoden

Jede Methode dient einem anderen Zweck. Verwenden Sie diese Tabelle, um den richtigen Ansatz für Ihre Situation zu wählen.

Für die Überprüfung einzelner Seiten sind DevTools oder WAVE die schnellsten Optionen. Für Websites mit Hunderten oder Tausenden von Bildern spart ein automatisierter Crawler wie Alt Audit Stunden manueller Arbeit, indem er jede Seite scannt und jedes Bild kennzeichnet, das Aufmerksamkeit erfordert. Das Tool priorisiert Probleme nach Schweregrad, sodass Sie die wirkungsvollsten Probleme zuerst beheben und Ihren Fortschritt im Laufe der Zeit verfolgen können. Dies ist besonders wertvoll für Agenturen, die mehrere Kunden-Websites verwalten, oder für E-Commerce-Shops mit großen Produktkatalogen, bei denen eine manuelle Überprüfung unpraktisch wäre.

Was macht guten Alt-Text aus?

Sobald Sie Bilder ohne Alt-Text identifiziert haben, möchten Sie effektive Beschreibungen schreiben. Hier ist, was guter Alt-Text ausmacht:

• Seien Sie beschreibend und spezifisch: „Golden Retriever-Welpe spielt im Herbstlaub“ ist weitaus besser als „Hund“ oder „Foto“.
• Halten Sie es kurz: Streben Sie unter 125 Zeichen an. Screenreader können längeren Alt-Text abschneiden.
• Beginnen Sie nicht mit „Bild von“ oder „Foto von“: Screenreader geben bereits an, dass es sich um ein Bild handelt. Beschreiben Sie einfach, was es zeigt.
• Spiegeln Sie den Kontext wider: Dasselbe Bild kann je nach umgebendem Inhalt unterschiedlichen Alt-Text erfordern. Ein Diagramm auf einer Datenseite sollte den Datentrend beschreiben, nicht nur „Balkendiagramm“.
• Verwenden Sie leeren Alt-Text für dekorative Bilder: Wenn ein Bild rein dekorativ ist und keine Informationen hinzufügt, verwenden Sie alt="", um Screenreadern mitzuteilen, dass sie es überspringen sollen.

Häufige Alt-Text-Fehler, die Sie vermeiden sollten

Ein WCAG 1.1.1 (Non-text Content)-Audit auf Tausenden von Websites deckt immer wieder dieselben Muster auf. Die Vermeidung dieser häufigen Fehler kann sowohl Ihre Barrierefreiheitsbewertung als auch Ihre Sichtbarkeit in Suchmaschinen verbessern.

Achten Sie bei der Überprüfung Ihrer Bilder auf diese häufigen Fehler:

• Fehlendes Alt-Attribut: Einige ältere CMS-Systeme oder Drittanbieter-Plugins geben möglicherweise <img>-Tags ohne jegliches alt-Attribut aus.
• Dateiname als Alt-Text: Alt-Text wie „IMG_4823.jpg“ oder „banner-image-v2-final.png“ ist für niemanden hilfreich.
• Keyword-Stuffing: Das Überladen von Alt-Text mit Schlüsselwörtern für SEO-Zwecke („beste günstige Schuhe Schuhe online kaufen günstige Schuhe“) ist eine schlechte Barrierefreiheitspraxis und kann von Suchmaschinen bestraft werden.
• Identischer Alt-Text für verschiedene Bilder: Wenn mehrere Bilder auf einer Seite denselben Alt-Text haben, können Screenreader-Benutzer sie nicht unterscheiden.

Beginnen Sie noch heute mit der Überprüfung Ihres Alt-Textes

Ob Sie Entwickler, Content Manager oder SEO-Spezialist sind, die Kenntnis, wie man überprüft, ob ein Bild Alt-Text hat, ist eine grundlegende Fähigkeit für die Erstellung barrierefreier, leistungsstarker Websites.

Für eine schnelle, gründliche und skalierbare Lösung bietet Ihnen Alt Audit vollständige Transparenz über die Alt-Text-Abdeckung Ihrer Website – damit Sie Probleme schneller beheben und die WCAG-Standards einhalten können.

Häufig gestellte Fragen

Was ist Alt-Text und warum ist er wichtig?

Alt-Text (alternativer Text) ist eine Textbeschreibung, die mithilfe des alt-Attributs zum HTML-Tag eines Bildes hinzugefügt wird. Er erfüllt zwei Zwecke: Er ermöglicht Screenreadern, Bilder für Benutzer mit Sehbehinderungen zu beschreiben, und er hilft Suchmaschinen, den Bildinhalt für die Indizierung und Rangfolge zu verstehen. Gemäß WCAG 1.1.1 müssen alle nicht-dekorativen Bilder auf einer Website beschreibenden Alt-Text haben, um als barrierefrei zu gelten.

Wie überprüfe ich Alt-Text in Chrome?

Der schnellste Weg ist, mit der rechten Maustaste auf ein beliebiges Bild zu klicken und „Untersuchen“ auszuwählen, um Chrome DevTools zu öffnen. Der <img>-Tag wird im Elemente-Panel hervorgehoben, und Sie können das alt-Attribut direkt sehen. Wenn kein alt-Attribut vorhanden ist, fehlt dem Bild Alt-Text. Sie können auch Strg+U (Cmd+U auf Mac) drücken, um den vollständigen Seitenquelltext anzuzeigen und nach <img>-Tags zu suchen, um alle Bilder auf einmal zu überprüfen.

Was soll ich tun, wenn Bildern Alt-Text fehlt?

Bestimmen Sie zunächst, ob jedes Bild dekorativ oder aussagekräftig ist. Dekorative Bilder (Rahmen, Abstandhalter, Hintergrundmuster) sollten ein leeres Alt-Attribut (alt="") verwenden, damit Screenreader sie überspringen. Schreiben Sie für aussagekräftige Bilder eine kurze Beschreibung dessen, was das Bild im Kontext zeigt. Halten Sie Beschreibungen unter 125 Zeichen, vermeiden Sie Phrasen wie „Bild von“ oder „Foto von“ und konzentrieren Sie sich auf die Informationen, die das Bild vermittelt, anstatt auf sein visuelles Erscheinungsbild.

Kann ich die Überprüfung von Alt-Text für meine gesamte Website automatisieren?

Ja. Manuelle Methoden wie Quelltext anzeigen und DevTools eignen sich gut für einzelne Seiten, sind aber für Websites mit Hunderten oder Tausenden von Bildern unpraktisch. Automatisierte Tools wie Alt Audit durchsuchen Ihre gesamte Domain, identifizieren jedes Bild, dem Alt-Text fehlt, kennzeichnen schwache oder automatisch generierte Beschreibungen und priorisieren Probleme nach Schweregrad. Dieser Ansatz spart Stunden manueller Inspektion und stellt sicher, dass keine Seite übersehen wird.

Beeinflusst Alt-Text die SEO?

Ja. Suchmaschinen können Bilder nicht direkt „sehen“. Sie verlassen sich auf Alt-Text, um zu verstehen, was ein Bild darstellt und wie es mit dem umgebenden Inhalt zusammenhängt. Gut geschriebener Alt-Text hilft Bildern, in den Google Bildersuchergebnissen zu erscheinen, und liefert zusätzliche Relevanzsignale für die Seite. Laut Branchenforschung können Seiten mit optimiertem Bild-Alt-Text messbare Verbesserungen beim organischen Bildsuchverkehr und bei den Gesamt-Seitenrankings erzielen.

Was ist der Unterschied zwischen leerem Alt-Text und fehlendem Alt-Text?

Fehlender Alt-Text bedeutet, dass das alt-Attribut auf dem <img>-Tag überhaupt nicht vorhanden ist (<img src="foto.jpg">). Dies ist ein WCAG-Verstoß, da Screenreader oft stattdessen den Dateinamen vorlesen, was zu einer schlechten Benutzererfahrung führt. Leerer Alt-Text (alt="") ist beabsichtigt und gültig. Er weist Screenreader an, das Bild zu überspringen, was der richtige Ansatz für rein dekorative Bilder ist, die der Seite keinen informativen Wert verleihen.