Doppelter Alternativtext

Silktide findet verlinkte Bilder, deren Alternativtext den direkt daneben stehenden Text wiederholt. Wenn ein Bild und sein Nachbartext dasselbe sagen, hören Menschen, die einen Screenreader verwenden, dieselben Wörter doppelt.

<!-- Problem: wird als „Apple Apple“ vorgelesen -->
<a href="\/apple">
    <img src="apple.png" alt="Apple">
    Apple
</a>

<!-- Behoben: leeres alt, der Text allein benennt den Link -->
<a href="\/apple">
    <img src="apple.png" alt="">
    Apple
</a>

Warum das wichtig ist

dienen dazu, ein Bild für Menschen zu ersetzen, die es nicht sehen können. Wenn die identischen Wörter bereits neben dem Bild stehen, fügt der Alternativtext nichts hinzu – ein liest „Apple Apple“ vor, was fehlerhaft wirkt und das Zuhören ohne Nutzen verlangsamt. Hochgerechnet auf eine Seite mit Produktkacheln oder Nachrichten-Teasern wird die Wiederholung wirklich ermüdend.

Ein Bild, dessen Bedeutung vollständig vom angrenzenden Text getragen wird, ist faktisch und sollte auch so gekennzeichnet werden.

So beheben Sie das

Versehen Sie das Bild mit einem leeren alt="", damit es überspringen und nur den angrenzenden Text lesen, wie im obigen Beispiel.
Alternativ können Sie das Bild mit aria-hidden="true" ausblenden – nützlich, wenn Ihr darauf besteht, das alt-Attribut zu befüllen.
Wenn Bild und Text zwei getrennte Links mit demselben Ziel sind, führen Sie sie zuerst zu einem einzigen Link zusammen – siehe Benachbarte Links.

So prüft Silktide das

Findet jedes Bild, das sich innerhalb eines Links befindet.
Liest den für Hilfstechnologien bestimmten Text des Bildes: sein alt-Attribut oder ein aria-label.
Vergleicht ihn mit dem sichtbaren Text der Elemente unmittelbar vor und nach dem Bild.
Meldet das Bild, wenn beide exakt übereinstimmen; Groß-/Kleinschreibung wird ignoriert.

Fehlerbehebung

Der übereinstimmende Text ist nicht Teil des Links

Der Vergleich betrachtet die unmittelbaren Nachbarn des Bildes, was auch Text direkt außerhalb des Links einschließen kann. Die Doppelung ist für Screenreader-Nutzende beim Navigieren durch die Seite dennoch real, daher gelten dieselben Korrekturen.

Die Texte unterscheiden sich leicht

Es werden nur exakte Übereinstimmungen (ohne Beachtung der Groß-/Kleinschreibung) berichtet. Nahezu-Duplikate wie „Apple“ neben alt="Apple-Logo" bestehen diese Prüfung, aber überlegen Sie, ob der Alternativtext für Zuhörende noch etwas hinzufügt.