Alt-Text-Checker

Füge Deine Seiten-URL in das Feld Seiten-URL ein, stelle den Dekorations-Schalter ein und klicke auf Alt-Text überprüfen. Das Tool ruft die Seite ab, analysiert jedes <img>-Element und gibt jedes Bild mit seiner Alt-Klassifizierung zurück: fehlend, dekorativ, gut oder verdächtig. Du erhältst auch einen Abdeckungsprozentsatz (gut plus dekorativ dividiert durch Gesamtbilder) und einen CSV-Export. Manuell kannst Du mit der rechten Maustaste auf ein Bild klicken, Überprüfen wählen und das Alt-Attribut im HTML-Bereich lesen, aber dieser Ansatz dauert 30 Sekunden pro Bild und vermisst lazy-loaded Bilder, die unterhalb der Falte laden. Dieser Checker scannt alle Bilder in einem Pass, einschließlich derjenigen in <picture>- und <figure>-Tags. Für Seiten mit Hunderten von Bildern pro Seite ist die Zeiteinsparung real. Verwende danach den website-metadata-checker, um zu bestätigen, dass Meta-Tags Deine Bild-Überprüfung matching.

Ja, Alt-Text ist in der Seiten-Quelle sichtbar, obwohl es unter normalen Bedingungen für sehende Benutzer auf dem Bildschirm nicht angezeigt wird. Browser zeigen Alt-Text in drei Situationen: wenn ein Bild nicht lädt (broken link, blocked CDN), wenn ein Benutzer in einigen älteren Browsern mit der Maus darüber fährt, und wenn ein Bildschirmleser-Benutzer die Seite navigiert. Entwickler sehen Alt-Text in DevTools, indem sie das <img>-Element überprüfen. Suchmaschinen-Crawler lesen ihn direkt aus dem HTML. Um Alt-Text im großen Maßstab zu überprüfen, füge die URL in diesen Checker ein und Du erhältst jeden Alt-Wert auf der Seite in einer Ansicht, plus ein Thumbnail jedes Bildes, damit Du Unstimmigkeiten zwischen dem, was das Bild zeigt, und dem, was das Alt sagt, erkennen kannst. Für ein einzelnes Bild mit der rechten Maustaste klicken und Überprüfen wählen, dann das alt=-Attribut auf dem <img>-Tag lesen.

Alt-Text bedient hauptsächlich Menschen mit Sehbehinderungen, die Bildschirmleser nutzen, einschließlich Benutzer, die blind sind, Sehschwäche haben oder Bedingungen wie Makuladegeneration haben, die Bildinhalte unlesbar machen. Bildschirmleser wie NVDA, JAWS und VoiceOver lesen das Alt-Attribut laut, wenn sie auf ein Bild treffen. Ohne Alt-Text überspringt der Bildschirmleser das Bild entweder vollständig oder liest den Dateinamen, was normalerweise sinnlos ist. Alt-Text hilft auch Benutzern mit kognitiven Behinderungen durch Hinzufügen von Textkontext zu visuellen Inhalten und Benutzern mit langsamen Verbindungen, die Seiten ohne Bilder laden. WCAG 2.1 Erfolgskriterium 1.1.1 (Stufe A) erfordert Textalternativen für alle nicht-dekorativen Bilder, was Alt-Text zu einer grundlegenden Barrierefreiheitsanforderung weltweit macht. Der WebAIM-Million-Bericht von 2024 ergab, dass 54% der Homepages fehlenden Alt-Text auf mindestens einem Bild hatten, das häufigste WCAG-Verstoß über die Top-1-Million-Seiten.

Mit der rechten Maustaste auf das Bild auf der Webseite klicken und Überprüfen (oder Überprüfen Element in einigen Browsern) wählen. Im angezeigten HTML-Bereich nach dem alt-Attribut in dem Bild-Tag (<img>) suchen. Der Alt-Wert sitzt zwischen Anführungszeichen, zum Beispiel alt="Black leather Chelsea boot, side profile". Wenn das Attribut fehlt, hat das Bild keinen Alt-Text. Wenn Du alt="" siehst, ist das Alt beabsichtigt leer (dekorativ). Für ein einzelnes Bild ist Überprüfen schnell. Für eine vollständige Seite mit 30 oder 50 Bildern, auf jedem eines Überprüfen zu öffnen, dauert zehn Minuten. Dieser Checker scannt jedes Bild in einem Pass und gibt einen CSV mit Bild-URL, Alt-Wert und Klassifizierung zurück. Verwende Überprüfen für Spot-Checks und dieses Tool für vollständige Seiten-Überprüfungen vor dem Versand eines Redesigns oder nach einer CMS-Migration.

Verwende diesen Checker für eine vollständige Seiten-Überprüfung oder überprüfe einzelne Bilder mit Browser-DevTools. Für die vollständige Überprüfung gib Deine Seiten-URL ein, stelle den Dekorations-Schalter auf Ja, wenn Du möchtest, dass WCAG-konforme leere Alts als gut zählen, und klicke auf Alt-Text überprüfen. Die Ausgabe zeigt jedes Bild mit seinem Alt-Wert, eine Klassifizierung (fehlend / dekorativ / gut / verdächtig) und einen Abdeckungsscore. Für einzelne Bilder mit der rechten Maustaste klicken und Überprüfen wählen, dann das alt-Attribut auf dem <img>-Tag lesen. Für soziale Plattformen wie Instagram oder LinkedIn ist Alt-Text im Post-Erstellungsfluss bearbeitbar, aber nicht immer nach dem Posten sichtbar. Für Bilder in WordPress oder Webflow sitzt das Alt-Feld in der Medienbibliothek oder Block-Einstellungen. Führe eine vollständige Seiten-Überprüfung durch, bevor Du veröffentlichst und nach jeder CMS-Migration, um Alts zu erkennen, die bei Template-Änderungen entfernt werden.

Alt-Text lebt im HTML-Quellcode jeder Webseite und ist über mehrere Methoden sichtbar. In einem Browser mit der rechten Maustaste auf ein Bild klicken und Überprüfen wählen, dann das alt-Attribut auf dem <img>-Tag lesen. In Microsoft Office mit der rechten Maustaste auf ein Bild klicken und Alt-Text anzeigen wählen oder das Bild auswählen und Bildformat dann Alt-Text wählen. In Google Docs mit der rechten Maustaste klicken und Alt-Text wählen. In WordPress sitzt das Alt-Feld in der Medienbibliothek und dem Block-Editor. In Webflow sitzt es im Bild-Einstellungs-Panel. Für eine vollständige Seiten-Überprüfung über jedes Bild gleichzeitig die URL in diesen Checker einfügen und die Ausgabe zeigt jeden Alt-Wert plus ein Thumbnail jedes Bildes. Bildschirmleser zeigen auch Alt-Text an, wenn Benutzer durch Seiteninhalte navigieren, was der ursprüngliche Zweck des Attributs ist.

Der Autor oder Ersteller des Bildes ist die richtige Person, um Alt-Text zu schreiben, weil er den Kontext und den Grund versteht, warum das Bild hinzugefügt wurde. Ein Fotograf, der ein Produktbild macht, weiß, ob der Winkel, die Farbe oder das Detail am meisten zählt. Ein Schriftsteller, der ein Diagramm in einen Blog-Post einbettet, weiß, welchen Datenpunkt das Diagramm illustriert. Alt-Text-Schreiben an einen Entwickler oder Barrierefreiheits-Berater zu übergeben, nachdem das Bild hochgeladen wurde, verliert diesen Kontext. In einem Content-Team sollte der Workflow Alt-Text-Felder direkt in den Veröffentlichungsfluss (CMS, Design-Tool) stellen, damit der Autor den Alt in dem Moment schreibt, in dem er das Bild hochlädt. Verwende diesen Checker als endgültigen QA-Pass, um Alts zu erkennen, die der Autor übersprungen oder schlecht geschrieben hat. Für Seiten mit 1.000+ Bildern erwäge einen vierteljährlichen Überprüfungs-Zyklus: 25% der Seiten pro Quartal, wobei Du die Top-100-Traffic-treibenden URLs priorisierst.

Überspringe beschreibenden Alt-Text nur, wenn das Bild rein dekorativ ist und keine Information hinzufügt, wie ein Spacer-GIF, ein Hintergrundmuster, eine Trennlinie oder ein dekoratives Icon neben Text, der bereits das Gleiche sagt. In diesen Fällen alt="" (leere Zeichenkette) setzen und idealerweise role="presentation" hinzufügen, damit Bildschirmleser wissen, dass das Bild übersprungen werden soll, anstatt zu raten. Omittiere das Alt-Attribut niemals vollständig; fehlendes Alt zwingt Bildschirmleser, den Dateinamen anzukündigen, was normalerweise Rauschen ist. Überspringe auch Alt-Text auf CSS-Hintergrundbildern, die Bildschirmleser standardmäßig ignorieren. Der WebAIM-Million-Bericht von 2024 ergab, dass 11% der dekorativen Bilder ausführliche Alt-Text trugen, der leer sein sollte, was Bildschirmleser-Müdigkeit erzeugt. Dieser Checker kennzeichnet beide Lücken: fehlende Alts auf Inhaltsbildern und ausführliche Alts auf wahrscheinlich dekorativen.

Ctrl+Shift+R (Cmd+Shift+R auf Mac) führt einen Hard Refresh in Chrome durch, der die Seite neu lädt und den Browser-Cache umgeht. Es zwingt Chrome, jeden Asset neu herunterzuladen, einschließlich Bilder, CSS und JavaScript, anstatt aus zwischengespeicherten Kopien zu ziehen. Dies ist für Alt-Text-Überprüfung in zwei Fällen wichtig. Erstens, wenn Du Alt-Attribute über Dein CMS aktualisiert hast, aber die Seite zeigt immer noch die alten Alts in DevTools, zwingt ein Hard Refresh das neue HTML zum Laden. Zweitens, wenn Bilder nicht rendern und Du vermutest ein Caching-Problem anstelle eines echten broken link, bestätigt ein Hard Refresh, ob das Bild tatsächlich lädt. Nach einem Hard Refresh führe diesen Checker erneut aus, um die frisch abgerufene Seite zu überprüfen. Das Tool selbst ruft bei jedem Durchlauf eine frische Kopie der Seite ab, daher ist es nicht von Deinem Browser-Cache betroffen, aber DevTools-Spot-Checks sind es.

WCAG 2.1 Erfolgskriterium 1.1.1 (Non-text Content, Stufe A) erfordert, dass alle nicht-Text-Inhalte eine Textalternative mit äquivalentem Zweck haben, mit spezifischen Ausnahmen für dekorative Inhalte, Steuerelemente und CAPTCHAs. Für Bilder bedeutet dies, dass jedes aussagekräftige <img>-Tag ein nicht-leeres alt-Attribut benötigt, das das Bild beschreibt. Dekorative Bilder benötigen alt="". CAPTCHA-Bilder benötigen Alt-Text, das den Zweck beschreibt, nicht das Puzzle. WCAG 2.2 behält dieses Kriterium unverändert. ADA-Klagen in den USA nennen häufig fehlenden Alt-Text als primären Fehler, mit über 4.000 Web-Barrierefreiheits-Klagen, die 2023 allein eingereicht wurden. Der WebAIM-Million-Bericht von 2024 ergab, dass 54% der Top-Homepages fehlenden Alt-Text hatten. Dieser Checker bewertet jedes Bild gegen die WCAG-Regel und gibt Dir einen Abdeckungsscore, damit Du weißt, ob die Seite vor einer formellen Überprüfung auf diesem Kriterium die Stufe A besteht.

Strebe 5–125 Zeichen pro Alt an, mit den meisten guten Alts, die in den 40–80-Zeichen-Bereich fallen. Bildschirmleser schneiden Alts nach etwa 125 Zeichen in einigen Implementierungen ab, und Googles Image-Search-Algorithmus scheint Inhalte nach dieser Länge nicht mehr zu gewichten. Alles unter 5 Zeichen ist normalerweise zu vage (denk „logo" oder „icon"). Alles über 200 Zeichen liest sich als Keyword-Stuffing oder beschreibt Detail, das der Benutzer nicht verlangt hat. Für komplexe Bilder wie Infografiken, Diagramme oder Diagramme verwende einen kurzen Alt (unter 125 Zeichen) plus eine längere Beschreibung im umgebenden Absatz oder über das aria-describedby-Attribut. Dieser Checker kennzeichnet Alts unter 5 Zeichen als verdächtig und Alts über 200 Zeichen als zu lang, daher siehst Du beide Extreme in einem Überprüfungs-Pass.

Verwende alt="", wenn das Bild rein dekorativ ist und keine Information hinzufügt, die Text allein vermisst. Beispiele sind Spacer-GIFs, dekorative Trennlinien, Hintergrundmuster, dekorative Icons neben Text, der das Gleiche sagt, und CSS-Stil-Verzierungen. Kombiniere alt="" mit role="presentation", um Absicht explizit zu machen. Die leere Zeichenkette teilt Bildschirmlesern mit, das Bild sauber zu überspringen. Das Alt-Attribut ganz zu verpassen (kein alt= auf allen) zwingt Bildschirmleser, den Dateinamen anzukündigen, das falsche Ergebnis für dekorative Bilder. Der WCAG.com-Überprüfungs-Leitfaden von 2024 bemerkt, dass 11% der dekorativen Bilder ausführliche Alts tragen, die leer sein sollten, und 8% der aussagekräftigen Bilder leere Alts tragen, die beschreibend sein sollten. Stelle das Feld Leeres alt='' als beabsichtigtes dekoratives Element behandeln so ein, wie dieser Checker mehrdeutige leere Alts auf Deiner Seite handhabt.

Dateiname-als-Alt (alt="IMG_2847.jpg" oder alt="screen-shot-2024-01-15.png") teilt Bildschirmlesern mit, den Dateinamen buchstäblich Zeichen für Zeichen zu lesen, was sich nach Rauschen anhört und nichts über das Bild aussagt. Es gibt auch Google Image Search nichts Sinnvolles zum Ranking, da zufällige alphanumerische Dateinamen keinen semantischen Inhalt tragen. Die Ahrefs-Studie zur Bildsuche von 2024 ergab, dass Seiten mit Dateiname-Alts auf mehr als 20% der Bilder 40% niedriger in Google Image Search rangierten als Seiten mit beschreibenden Alts auf jedem Bild. Dieser Checker kennzeichnet Dateiname-Muster (IMG_, DSC_, screen-shot, .jpg im Alt-Wert, etc.) als verdächtig, damit Du sie schnell beheben kannst. Ersetze alt="IMG_2847.jpg" mit dem, was das Bild tatsächlich zeigt: alt="Black leather Chelsea boot, side profile". Die Behebung dauert 10 Sekunden pro Bild und stellt sowohl Barrierefreiheit als auch Bild-SEO-Wert wieder her.

Google liest Alt-Text an zwei Stellen: als primäres Rankingsignal für Google Image Search und als Inhaltskontext für die umgebende Seite in der regulären Websuche. Für die Bildsuche rankt Google Bilder teilweise danach, wie gut der Alt-Text mit der Suchanfrage übereinstimmt, neben Dateiname, umgebender Text und Bildqualitätssignalen. Für die Websuche nutzt Google Alt-Text, um zu verstehen, worüber eine Seite spricht, wenn Bilder signifikante Inhalte tragen (Diagramme, Produktfotos, Infografiken). Eine Ahrefs-Studie von 2024 über 1,2 Millionen Bildsuchergebnisse fand, dass Seiten mit beschreibenden Alts auf jedem above-the-fold-Bild 30–50% höher in Google Image Search rangierten als Seiten mit fehlenden oder Dateiname-Alts. Google bestraft fehlenden Alt-Text nicht direkt in regulären Such-Rankings, aber fehlende Alts verfallen dem Image-Search-Traffic und schwächen topische Relevanz-Signale. Verwende diesen Checker zusammen mit dem website-metadata-checker für eine vollständige On-Page-SEO-Überprüfung.

Alt-Text (alt="...") ist die Textalternative für den Bild-Inhalt, gelesen von Bildschirmlesern und von Suchmaschinen zur Bild-Ranking verwendet. Das Title-Attribut (title="...") ist ergänzender Text, der als Tooltip beim Hover in einigen Browsern angezeigt wird, und wird von Bildschirmlesern und Suchmaschinen weitgehend ignoriert. Alt ist erforderlich von WCAG. Title ist optional und oft unbrauchbar, da mobile Benutzer nicht hovern können und viele Desktop-Bildschirmleser ihn überspringen. Wenn Du etwas Nützliches über ein Bild zu sagen hast, setze es in den Alt oder in den umgebenden Absatz, nicht in den Title. Die WebAIM-Umfrage von 2024 zu Bildschirmleser-Benutzern ergab, dass 73% der Respondenten Alt-Text über Title-Attribute für Bild-Information bevorzugten. Dieser Checker überprüft nur das Alt-Attribut, da Title selten die Optimierung lohnt. Konzentriere Deine Bemühung auf das Schreiben starker Alts und das Überspringen von Titles, es sei denn, Du hast einen spezifischen Grund, sie zu verwenden.

Bildschirmleser wie NVDA, JAWS und VoiceOver kündigen Bilder an, indem sie das Alt-Attribut laut lesen, präfixiert mit dem Wort „image" oder „graphic", abhängig vom Bildschirmleser. Für <img alt="Black leather Chelsea boot"> kündigt NVDA „graphic, Black leather Chelsea boot" an. Für <img alt=""> mit role="presentation" überspringt der Bildschirmleser das Bild vollständig. Für <img> ohne Alt-Attribut überhaupt, greifen die meisten Bildschirmleser auf das Lesen des Dateinamens oder der URL zurück, was sich nach „graphic, I M G underscore 2 8 4 7 dot J P G" anhört. Die WebAIM-Bildschirmleser-Umfrage von 2024 ergab, dass 67% der Respondenten fehlenden oder schlechten Alt-Text als „sehr ernstes" Hindernis für die Webnutzung bewerteten, wobei er fehlende Form-Labels und fehlerhafte Tastatur-Navigation überrangte. Führe diesen Checker vor jeder Version aus, um fehlende und verdächtige Alts zu erkennen, bevor Bildschirmleser-Benutzer auf sie treffen.

Guter Alt-Text ist kurz (40–80 Zeichen typisch, 125 max), beschreibt das, was das Bild zeigt, in Klartext, und fügt Information hinzu, die nicht bereits im umgebenden Text ist. Führe mit dem wichtigsten visuellen Element an. Für ein Produktfoto: „Red Adidas Samba, three-quarter view". Für ein Diagramm: „Bar chart showing 40% revenue growth Q1 to Q4 2024". Für ein Porträt: „Sarah Chen, CEO of Acme, smiling at camera". Überspringe Phrasen wie „image of" oder „picture of", da Bildschirmleser bereits ankündigen, dass es sich um ein Bild handelt. Überspringe den Dateinamen. Überspringe Keyword-Stuffing. Für dekorative Bilder verwende alt="" mit role="presentation". Für komplexe Bilder wie Infografiken schreibe einen kurzen Alt und setze die vollständige Beschreibung in den umgebenden Absatz oder in ein aria-describedby-Element. Dieser Checker kennzeichnet Alts unter 5 Zeichen, über 200 Zeichen, alle Großbuchstaben, einzelne Wörter und Dateiname-Muster, damit Du die schwachen in einem Pass umschreiben kannst.