Fehlender Alternativtext

Silktide findet Bilder auf Ihren Seiten, die überhaupt keinen Alternativtext haben. Alternativtext ist die schriftliche Beschreibung, die anstelle eines Bildes vorgelesen wird; ohne ihn sind Bilder für Menschen, die sie nicht sehen können, bedeutungslos.

<!-- Problem: kein alt-Attribut -->
<img src="apple.png">

<!-- Behoben: beschreibender Alternativtext -->
<img src="apple.png" alt="Ein roter Apfel">

<!-- Ebenfalls gültig: ausdrücklich dekorativ -->
<img src="decorative-swirl.png" alt="">

Warum das wichtig ist

Ein kann bei einem Bild ohne nichts ansagen – bestenfalls liest er den Dateinamen vor, was selten hilfreich und oft verwirrend ist. Blinde Menschen oder Personen mit Sehbeeinträchtigung verlieren die Information, die das Bild vermittelt, und wenn es sich um ein Diagramm, eine Schaltfläche oder einen Link handelt, können sie die Seite möglicherweise gar nicht benutzen.

Alternativtexte werden außerdem angezeigt, wenn Bilder nicht geladen werden, und helfen Suchmaschinen, Ihre Bilder zu verstehen – das Korrigieren nützt also allen Besuchern.

So beheben Sie das Problem

Fügen Sie in Ihrem jedem Bild einen Alternativtext hinzu – die meisten bieten dafür ein Feld an, wo immer Sie ein Bild einfügen. Im Code verwenden Sie das Attribut alt, wie oben gezeigt.
Beschreiben Sie die Information oder den Zweck des Bildes, nicht sein Aussehen. Wenn das Bild als Link oder Schaltfläche dient, beschreiben Sie, wohin es führt oder was es bewirkt.
Wenn das Bild rein ist, geben Sie ihm ein leeres alt="", damit Screenreader es überspringen. Erfinden Sie keinen Fülltext – „dekorative Schnörkel-Grafik“ zu hören, ist schlechter als gar nichts zu hören.

WebAIM veröffentlicht einen ausführlichen Leitfaden zum Schreiben von Alternativtexten.

So prüft Silktide dies

Alle Bilder auf jeder Seite finden.
Bilder überspringen, die keinen Alternativtext benötigen: Bilder ohne Quelle, Bilder mit 1 Pixel oder kleiner (meist Tracking-Pixel) und Bilder, die vor Screenreadern verborgen sind.
Bilder überspringen, die mit einem Attribut role="presentation" als dekorativ markiert sind, da sie absichtlich vor verborgen werden.
Jedes verbleibende Bild melden, das überhaupt kein alt-Attribut hat.

Ein Bild mit leerem alt="" besteht diese Prüfung, fällt aber unter Dekorative Bilder, wo Sie bestätigen sollen, dass es wirklich dekorativ ist. Vorhandene, aber wenig hilfreiche Alternativtexte werden unter Unzureichender Alternativtext behandelt.

Fehlerbehebung

Das Bild ist dekorativ – warum wird es markiert?

Ein Bild wird nur dann als dekorativ behandelt, wenn dies im Code angegeben ist, entweder durch ein leeres alt="" oder role="presentation". Ein Bild ganz ohne alt-Attribut ist mehrdeutig – Assistive Technologien können „dekorativ“ nicht von „vergessen“ unterscheiden – daher fällt es bei dieser Prüfung durch. Fügen Sie das leere Attribut hinzu, um die Absicht eindeutig zu machen.

Das Bild stammt von einem Drittanbieter-Dienst

Von eingebetteten Diensten wie Karten generierte Bilder lassen sich möglicherweise nicht von Ihnen bearbeiten. In den Einstellungen Ihrer Website können Sie Inhalte von Drittanbietern von dieser Prüfung ausschließen, oder Sie können einzelne, nicht änderbare Feststellungen .