Alt-Text-Prüfer für Bilder
Jedes Bild, in Worten beurteilt
Dieser Alt-Text-Prüfer liest jedes Bild einer Live-Seite und sagt für jedes einzelne, ob sein Alt-Text einem Zuhörer hilft. Außerdem markiert er fehlendes alt, Dateinamen und nichtssagende Wörter und unterscheidet verlinkte Bilder von Dekoration.
- KostenlosPreis
- AchtPrüfungen
- KeineAnmeldung
- NichtsGespeichert
Alt-Text-Prüfer für Bilder
Jedes Bild einer Seite, der Alt-Text, den es trägt, und der Alt-Text, der fehlt
- Bilder
- 0
- Ganz ohne Alt
- 0
- Als dekorativ markiert
- 0
- Zu verbessern
- 0
- Bereits gut
- 0
| # | Bild | Alt-Text | Urteil | Was tun |
|---|---|---|---|---|
| Fügen Sie oben eine Adresse ein, dann erscheinen die Bilder hier. | ||||
Bereit. Fügen Sie eine öffentliche Adresse ein, dann liest dieser Server die Bilder darauf einmal.
Wofür Alt-Text da ist
Alt-Text ist der Satz, der ein Bild ersetzt, wenn man das Bild nicht sehen kann.
Der Screenreader spricht ihn für Blinde aus. Ein Browser zeigt ihn, wenn die Datei nicht lädt. Außerdem lesen ihn Suchmaschinen, weil er die klarste Aussage darüber ist, was ein Bild zeigt.
Die Frage ist also nie nur, ob ein Bild Alt-Text hat. Stattdessen geht es darum, ob die Worte für jemanden Sinn ergeben, der das Bild gar nicht sehen kann.
Genau diese Frage stellt das Tool jedem Bild und jedem Alt-Tag auf der Seite, und es antwortet in klaren Worten statt mit bestanden oder durchgefallen.
Fehlendes und leeres Alt sind zweierlei
Fehlt das alt-Attribut, ist das ein Fehler. Weil nichts zum Vorlesen da ist, greifen viele Screenreader auf den Dateinamen zurück und lesen etwa "IMG Unterstrich 4031 Punkt jpg" vor.
Ein leeres alt, geschrieben alt="", ist dagegen eine Entscheidung. Es sagt Hilfstechnik, das Bild zu überspringen, was die W3C-Richtlinie zu dekorativen Bildern für eine Trennlinie, eine Hintergrundform oder ein Symbol neben einem Wort empfiehlt, das schon dasselbe sagt.
Deshalb zählt dieser Prüfer beide getrennt. Das Erste muss behoben werden, während das Zweite meist gar nichts braucht.
Warum ein verlinktes Bild am meisten zählt
Wenn ein Bild das Einzige in einem Link ist, wird sein Alt-Text zum Namen dieses Links.
Ohne ihn hat der Link keinen Namen, also sagt ein Screenreader die Adresse oder einfach "Link" an. Dann trifft jemand, der mit der Tabulatortaste durch die Seite geht, auf eine Reihe gleicher, namenloser Stopps.
Deshalb stehen diese Zeilen ganz oben. Außerdem sollte der Alt-Text eines verlinkten Bildes beschreiben, wohin der Link führt, und nicht, wie das Bild aussieht.
Alt-Text, der besteht und trotzdem versagt
Die meisten Validatoren hören bei "das Attribut ist vorhanden" auf. Folglich bestehen alt="DSC00412.jpg", alt="image" und alt="banner", obwohl keins davon einem Zuhörer etwas sagt.
Dieser Prüfer liest die Worte. Er erkennt Datei- und Kameranamen, einzelne nichtssagende Wörter und Anfänge wie "Bild von", die ein Screenreader schon vor dem Text sagt.
Er bemerkt auch denselben Alt-Text auf drei oder mehr verschiedenen Bildern, denn das ist meist ein Theme-Standardwert und keine Beschreibung.
Kopien in noscript
Lazy-Loading-Plugins legen oft eine zweite Kopie jedes Bildes in einem noscript-Tag für Crawler ab. Der Prüfer listet diese Kopien auf und lässt sie dann aus den Zahlen heraus, damit kein Bild zweimal beurteilt wird.
Die passende Länge für einen Alt-Text
Ein Satz reicht meist. Viele Screenreader brechen ab etwa 125 Zeichen ab oder werden zumindest schwer verständlich.
Braucht ein Bild mehr Erklärung, etwa ein Diagramm, gehört das Detail in eine sichtbare Bildunterschrift oder in den Text daneben. Dann bleibt der Alt-Text kurz und verweist dorthin.
Was der Prüfer nicht sehen kann
Er liest die Seite so, wie der Server sie sendet, und das liest auch ein Crawler zuerst. Folglich erscheinen Bilder, die ein Skript später einfügt, und CSS-Hintergrundbilder hier nicht.
CSS-Hintergrundbilder können ohnehin keinen Alt-Text tragen. Wenn eines davon Bedeutung hat, gehört es deshalb in ein img-Tag.
So nutzen Sie den Alt-Text-Prüfer
Eine Adresse hinein, eine Zeile pro Bild heraus, die Probleme zuerst.
- 1
Seitenadresse einfügen
Jede öffentliche Seite geht. Auch eine reine Domain reicht, denn https:// wird ergänzt.
- 2
Auf Prüfen drücken
Dieser Server liest die Seite einmal und liefert jedes Bild und jeden Frame darauf. Die Seite selbst wird hier nie angezeigt.
- 3
Mit den roten Zeilen beginnen
Verlinkte Bilder ohne alt kommen zuerst, weil diese Links keinen Namen haben. Danach folgen Bilder ganz ohne alt.
- 4
Die vorgeschlagenen Worte nutzen
Wo der Dateiname lesbar ist, macht der Prüfer daraus einen Anfangssatz. Bearbeiten Sie ihn dann zu einer echten Beschreibung, bevor Sie ihn verwenden.
Was diesen Alt-Text-Prüfer auszeichnet
Die meisten Prüfer zählen Attribute. Dieser liest dagegen, was darin steht.
Acht Urteile statt zwei
Fehlend, verlinkt, Dateiname, nichtssagend, überflüssig, zu lang, wiederholt und dekorativ. Außerdem hat jedes Urteil seinen eigenen Grund.
Verlinkte Bilder zuerst
Ein Bild, das der ganze Link ist, bestimmt den Namen dieses Links, deshalb stehen diese Fehler ganz oben.
Eine Lösung in jeder Zeile
Jedes Problem kommt mit dem nächsten Schritt und oft mit einem Anfangssatz aus dem Dateinamen.
Dekoration bleibt unangetastet
alt="" und aria-hidden gelten als Entscheidungen, nicht als Fehler, denn bei einer Trennlinie sind sie die richtige Antwort.
Auch Frames werden geprüft
Ein eingebettetes Video oder eine Karte wird über das title-Attribut benannt, deshalb werden Frames ohne title ebenfalls markiert.
Export mit einem Klick
Kopieren Sie den Bericht oder laden Sie ihn als CSV herunter, und geben Sie ihn dann an die Person weiter, die die Seite bearbeitet.
Regeln für guten Alt-Text
Acht Gewohnheiten, die aus einem Attribut eine Beschreibung machen.
- Beschreiben Sie die Aufgabe, nicht die Pixel. Fragen Sie, was das Bild der Seite hinzufügt. Ein Produktfoto braucht das Produkt; ein Diagramm braucht dagegen seine Aussage.
- Nennen Sie bei verlinkten Bildern das Ziel. Ist das Bild der Link, dann ist der Alt-Text der Linktext. Also schlägt "Unsere Preise ansehen" den "Blauen Pfeil".
- Lassen Sie "Bild von" weg. Ein Screenreader kündigt ein Bild bereits an. Beginnen Sie deshalb direkt mit dem Motiv.
- Nutzen Sie alt="" für Dekoration. Trennlinien, Verzierungen und Hintergrundformen sollen übersprungen werden, und ein leeres alt ist der Weg, das zu sagen.
- Ein einziger Satz reicht. Ab etwa 125 Zeichen gehört das Detail in eine Bildunterschrift, wo alle es lesen können.
- Schreiben Sie den Text, der im Bild steht. Steht auf einem Banner "Sommerschlussverkauf, 30 Prozent Rabatt", sollte der Alt-Text das auch sagen, denn sonst ist das Angebot für Zuhörer unsichtbar.
- Kein Keyword-Stuffing im Alt-Attribut. Für Suchmaschinen geschriebener Alt-Text klingt vorgelesen schlecht. Außerdem enthält eine natürliche Beschreibung die wichtigen Wörter ohnehin.
- Nach jedem Relaunch noch einmal testen. Themes und Page-Builder setzen Alt-Text öfter zurück, als man denkt, deshalb sollte man nach jedem Vorlagenwechsel erneut prüfen.
Sechs Alt-Text-Fehler, die Validatoren durchlassen
Jeder davon hat ein alt-Attribut, und trotzdem lässt jeder den Zuhörer raten.
Der Dateiname der Kamera
alt="IMG_4031" bleibt nach einem Upload übrig. Es besteht jeden Validator und beschreibt nichts.
Ein nichtssagendes Wort
"Logo", "Bild" und "Banner" nennen eine Kategorie. Sagen Sie stattdessen, wessen Logo oder was das Banner anbietet.
Überall derselbe Text
Eine Galerie mit zwanzig Fotos, die alle "Unsere Arbeit" heißen, gibt einem Zuhörer zwanzigmal dieselbe Information.
Ein Absatz im Attribut
Langen Alt-Text kann man nicht überfliegen oder anhalten. Setzen Sie das Detail daher in eine Bildunterschrift und halten Sie das alt kurz.
Ein leeres alt in einem Link
alt="" auf dem Einzigen in einem Link lässt den Link ganz ohne Namen.
Keywords statt Worte
Eine Liste von Suchbegriffen klingt vorgelesen wie Spam, und außerdem hilft sie niemandem, die Seite zu finden.
Häufige Fragen zum Alt-Text
Was ist Alt-Text?
Es ist der Text im alt-Attribut eines Bildes. Screenreader lesen ihn vor, Browser zeigen ihn, wenn das Bild nicht lädt, und Suchmaschinen lesen ihn, um das Bild zu verstehen.
Braucht jedes Bild Alt-Text?
Jedes img-Tag muss ein alt haben, notfalls leer. Ein rein dekoratives Bild sollte jedoch ein leeres haben, alt="", damit Screenreader es überspringen.
Hilft Alt-Text bei SEO?
Ja. Er ist der wichtigste Weg, auf dem eine Suchmaschine erfährt, was ein Bild zeigt, und das zählt für die Bildersuche. Schreiben Sie ihn trotzdem zuerst für Menschen, denn genau das liest auch ein Crawler am besten.
Wie viele Zeichen gehören in einen Alt-Text?
Ein kurzer Satz, am besten unter 125 Zeichen. Längere Erklärungen gehören deshalb in eine sichtbare Bildunterschrift.
Worin unterscheiden sich alt und title?
Für alle, die das Bild nicht sehen, übernimmt alt seine Aufgabe. Title ist dagegen ein optionaler Tooltip, den die meisten Screenreader ignorieren, also kann er Alt-Text nicht ersetzen.
Warum markiert der Prüfer mein Logo?
Meist, weil der Alt-Text nur "Logo" sagt. Sagen Sie, wessen Logo es ist, und wenn es zur Startseite führt, sagen Sie stattdessen das, etwa "Denwix Startseite".
Warum fehlen manche Bilder in der Liste?
Der Prüfer liest die Seite so, wie der Server sie sendet. Daher sind Bilder, die ein Skript später einfügt, oder CSS-Hintergründe nicht in diesem Markup.
Was sind die noscript-Kopien?
Viele Lazy-Loading-Plugins legen für Crawler eine zweite Kopie jedes Bildes in noscript ab. Sie stehen in der Liste, werden aber nicht mitgezählt.
Kann ich eine Seite hinter einem Login prüfen?
Nein. Die Seite muss öffentlich sein, denn dieser Server liest sie so, wie ein Besucher ohne Konto sie sehen würde.
Wird die geprüfte Seite irgendwo gespeichert?
Nein. Die Adresse dient einem einzigen Abruf und ist dann weg, und dieser Server behält weder die Seite noch den Bericht.
Tools zum Prüfen von Bildern
Alt-Text ist nur eine Frage an ein Bild. Diese beantworten die übrigen.
Lazy-Loading-Prüfer
Welche Bilder zu früh laden und welche zu lange warten.
Tool öffnen →Bildgröße ermitteln
Breite, Höhe und Dateigewicht, im Browser gemessen.
Tool öffnen →Bildkonverter
Schwere Bilder in WebP oder AVIF umwandeln, ohne sie hochzuladen.
Tool öffnen →
Nehmen wir Ihre Bilder unter die Lupe?
Fügen Sie eine Adresse ein und lesen Sie ein Urteil zu jedem Bild. Der Alt-Text-Prüfer ist kostenlos, braucht kein Konto und speichert nichts über die Seite.