Bild-Alt-Text-Prüfer
Kurze Antwort
Bilder ohne Alt-Text finden und vorhandene Alt-Attribute prüfen.
Was es nicht leistet: Es prüft, ob ein Alt-Text vorhanden, leer oder ein Dateiname ist, nicht ob er das Bild gut beschreibt; per Skript eingefügte Bilder und CSS-Hintergrundbilder sind nicht enthalten.
Was es macht
Scannt jedes <img> auf der Seite und prüft, ob Alt-Text vorhanden ist, ob dekorative Bilder korrekt mit leerem `alt=""` gekennzeichnet sind, und ob der Alt-Text nur den Dateinamen des Bildes wiederholt. Liefert eine Liste der Bilder, die Aufmerksamkeit brauchen.
Warum es wichtig ist
Alt-Text ist, wie Screenreader-Nutzer:innen erfahren, was ein Bild zeigt, und WCAG 1.1.1 verlangt eine Textalternative für jedes bedeutungstragende Bild. Google nutzt Alt-Text außerdem zusammen mit der umgebenden Seite, um Bilder für die Google-Bildersuche zu verstehen. Fehlender Alt-Text lässt die erste Gruppe durchfallen und gibt der zweiten weniger Anhaltspunkte.
Wie es funktioniert
-
Seiten-URL eingeben oder HTML einfügen
-
Wir lesen jedes <img>-Element und dessen alt-Attribut aus dem HTML aus
-
Qualitätsregeln anwenden: fehlender Alt-Text, leerer Alt-Text (dekorativ) und Dateiname-als-Alt-Text
-
Rückgabe der Alt-Text-Abdeckung sowie einer Liste der Bilder ohne passenden Alt-Text
Beispiel-Ein- und Ausgabe
url: https://web.dev/articles/vitals
Bilder: 9 mit alt: 8 leeres alt (dekorativ): 1 ohne alt: 0 OK alt = Dateiname: 0 OK Abdeckung: 100 %
So lesen Sie das Ergebnis
- Bilder (9 im Beispiel)
- Jedes <img>-Element im HTML, das Ihr Server sendet. Bilder als CSS-Hintergrund, mit SVG gezeichnete oder später per Script eingefügte Bilder werden nicht gezählt.
- Ohne alt (0)
- Bilder ganz ohne alt-Attribut. Screenreader lesen dann oft den Dateinamen vor oder sagen nur „Bild“, und WCAG 1.1.1 ist nicht erfüllt. Diese Zahl senkt den Score.
- Leeres alt (1)
- Bilder mit alt="". Das ist richtig für ein rein dekoratives Bild und falsch für eines, das Information trägt. Das Tool kann beides nicht unterscheiden und zeigt daher nur die Zahl ohne Urteil — sehen Sie sich jedes an.
- alt ist nur der Dateiname
- Ein Alt-Text, der den Dateinamen wiederholt, etwa „hero-banner-2“ oder „IMG_0423“, sagt niemandem etwas. Er erhält eine Warnung, obwohl das Attribut vorhanden ist.
- Abdeckung (100 %)
- Der Anteil der Bilder mit alt-Attribut, leer oder nicht. 100 % heißt, dass keines fehlt; es heißt nicht, dass jeder Text gut ist, denn das Tool kann nicht beurteilen, ob ein alt sein Bild beschreibt.
- Zu korrigierende Bilder
- Unter den Zahlen listet der Bericht bis zu acht Bilder ohne alt mit ihrem Dateinamen auf, damit Sie sie in Vorlage oder Mediathek finden.
Wer es nutzt
-
E-Commerce-Manager
Produktseiten auf Bilder ohne Alt-Text oder mit dem Dateinamen als Alt-Text prüfen, ein häufiger Katalog-Standardwert.
-
Auditor:in für Barrierefreiheit
Die WCAG-1.1.1-Alt-Text-Abdeckung Seite für Seite prüfen und jedes Bild ohne alt-Attribut auflisten.
-
Content-Redakteur:in
Jede veröffentlichte Seite prüfen, um ohne Alt-Text hochgeladene Bilder abzufangen, bevor sie sich anhäufen.
Häufige Probleme und ihre Lösung
-
Inhaltsbilder ohne alt
Schreiben Sie, was das Bild zeigt und auf dieser Seite zählt: „Roter Trailschuh, Seitenansicht“ auf einer Produktseite, den Trend eines Diagramms in einem Bericht. Bleiben Sie bei einem Satz; längere Beschreibungen gehören in den Text oder eine Bildunterschrift.
<img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June"> <img src="/divider.svg" alt=""> -
Das CMS fügt Bilder ohne alt ein
Die meisten Content-Systeme haben ein alt-Feld in der Mediathek: Machen Sie es für Redakteure zur Pflicht und geben Sie es in der Vorlage aus, statt das Attribut wegzulassen. Für dekorative Bilder soll die Vorlage ausdrücklich alt="" schreiben.
-
Icons und Logos
Ein Icon neben einem Textlabel ist dekorativ: alt="". Ein Icon, das der einzige Inhalt eines Buttons oder Links ist, braucht einen Alt-Text, der die Aktion nennt („Suchen“, „Menü schließen“). Ein Logo, das zur Startseite führt, braucht den Namen der Organisation, nicht „Logo“.
<a href="/"><img src="/logo.svg" alt="Example Ltd – home"></a> <button type="button"><img src="/icons/search.svg" alt="Search"></button> <img src="/icons/check.svg" alt=""> In stock -
Alt-Text voller Keywords
Googles Richtlinien für Bilder warnen davor, alt-Attribute mit Keywords zu füllen. Beschreiben Sie das Bild; nennen Sie das Thema einmal und natürlich, wenn es wirklich im Bild ist.
-
Diagramme und komplexe Bilder
Geben Sie dem alt eine kurze Zusammenfassung wie „Balkendiagramm: Anmeldungen haben sich von März bis Juni verdoppelt“ und stellen Sie die vollständigen Zahlen in den Seitentext oder eine Tabelle daneben, damit alle sie bekommen.
Häufig gestellte Fragen
- Wann sollte der Alt-Text leer sein?
- Bei dekorativen Bildern ohne informativen Wert (Hintergrundmuster, Trennlinien). Verwenden Sie `alt=""`, damit Screenreader sie überspringen. Lassen Sie das Attribut niemals ganz weg.
- Was macht guten Alt-Text aus?
- Eine kurze Formulierung, die beschreibt, was das Bild zeigt und warum es dort ist. Verzichten Sie auf "Bild von" oder "Foto von", und verwenden Sie ein Keyword nur dort, wo es das Bild wirklich beschreibt.
- Wie nutzt Google Alt-Text?
- Google nutzt Alt-Text zusammen mit dem Seiteninhalt, um zu verstehen, was ein Bild zeigt, was hilft, das Bild in der Google-Bildersuche anzuzeigen. KI-Assistenten, die eine Seite lesen, können ihn auf dieselbe Weise nutzen.
- Was ist mit Bildunterschriften (figcaption)?
- Bildunterschriften (`<figcaption>`) ergänzen den Alt-Text, ersetzen ihn aber nicht. Beide sollten das Bild beschreiben; Alt-Text ist für Screenreader, die Bildunterschrift für sehende Nutzer:innen.
Quellen
Die Dokumentation, auf der dieses Tool und die Erklärungen auf dieser Seite beruhen.
- Understanding Success Criterion 1.1.1: Non-text Content — W3C Web Accessibility Initiative
- An alt Decision Tree — W3C Web Accessibility Initiative
- Decorative Images — W3C Web Accessibility Initiative
- Image SEO Best Practices — Google Search Central
- HTML Standard: Embedded content — images — WHATWG