Alt-Text für ein Bild in einem Link

Silktide findet Links, die ein Bild, aber keinerlei lesbaren Text enthalten. Ein solcher Link hat keinen Namen, sodass Personen, die das Bild nicht sehen können, nicht wissen, wohin er führt.

<!-- Problem: Der Link hat keinen zugänglichen Namen -->
<a href="\/apple">
    <img src="apple.png">
</a>

<!-- Lösung: Der Alt-Text benennt den Link -->
<a href="\/apple">
    <img src="apple.png" alt="Ein roter Apfel">
</a>

Warum das wichtig ist

Wenn der einzige Inhalt eines Links ein Bild ist, wird der des Bildes zum Namen des Links. Ohne ihn kündigt ein etwas wie „Link“ an oder greift darauf zurück, die Ziel-URL oder den Dateinamen des Bildes vorzulesen – nichts davon sagt der hörenden Person, wohin der Link führt. Aus Bild-Links aufgebaute Navigationen, etwa Logos und Symbolmenüs, werden zum Ratespiel.

Auch Tastatur- und Sprachsteuerungsnutzende sind betroffen: Ein Link ohne Namen lässt sich mit Sprachbefehlen schwer ansteuern und ist in einer Linkliste bedeutungslos.

So beheben Sie das Problem

Fügen Sie dem Bild einen Alternativtext hinzu, der den Zweck des Links beschreibt – wohin er führt oder was er tut – statt wie das Bild aussieht. Bei einem verlinkten Logo sind „Startseite“ oder der Name Ihrer Organisation besser als „Logo“.
Alternativ können Sie sichtbaren Text neben dem Bild innerhalb des Links hinzufügen; das Bild kann dann ein leeres alt="" haben.
Beheben Sie Vorlagen in Ihrem , in denen sich derselbe unbeschriftete Symbol-Link über mehrere Seiten wiederholt.

So testet Silktide dies

Findet jedes Bild, das sich innerhalb eines Links befindet, und überspringt Links, die vor Screenreadern verborgen sind.
Liest allen Text, den der Link gegenüber offenlegt, einschließlich der Alternativtexte aller darin enthaltenen Elemente.
Meldet das Bild, wenn dieser kombinierte Text keine Buchstaben oder Zahlen enthält und der Link dadurch keinen nutzbaren Namen hat.

Im Gegensatz zu anderen Prüfungen zum Alternativtext besteht ein leeres alt="" hier nicht: Ist das Bild der einzige Inhalt des Links, lässt die Kennzeichnung als dekorativ den Link namenlos.

Fehlerbehebung

Das Bild ist dekorativ

Innerhalb eines Links ohne weiteren Text kann ein Bild nicht als rein behandelt werden – irgendetwas muss den Link benennen. Geben Sie dem Bild entweder einen Alternativtext, der das Ziel beschreibt, oder fügen Sie dem Link sichtbaren Text hinzu.

Der Link ist auf andere Weise benannt

Diese Prüfung liest Text und Alternativtext innerhalb des Links. Wenn Ihr Link auf andere Weise benannt wird und Sie überprüft haben, dass er in einem Screenreader korrekt angekündigt wird, können Sie den Fund .