Link enthält kein text zeigt Fehler in Wave accessibility evaluation tool
Ich habe eine HTML-Seite, in der es
<a href="example.com"><i class="myclass"></i></a>
<a href="http://www.google.com" class="cart visible-xs"><i class="t-icon t-icon-cart-xs-2"></i></a>
aber von wave accessibility tool, es zeigt eine Fehlermeldung, dass das Anker-tag enthält keinen text, ich bin zwar mit <i>
tag in der <a>
tag, aber ich kann nicht alles schreiben, was im inneren Anker-tag.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Entsprechend der WAVE tool die beiden
<a>
Elemente, die Sie, vorausgesetzt, beide enthalten Leere Links, die gegen WCAG 2.0 Richtlinie 2.4.4 "Link-Ziel (Im Kontext)".Aus der WAVE-tool:
", Was Es Bedeutet,
Ein link enthält keinen text.
Warum Es Wichtig Ist
Wenn Sie einen link enthält keinen text, die Funktion oder den Zweck der link wird nicht dem Benutzer präsentiert werden. Dies kann die Einführung Verwirrung für Tastatur und screen-reader-Benutzer.
, Wie Es zu Beheben
Entfernen Sie die leere link oder geben text in den link, der beschreibt die Funktionalität und/oder das Ziel des Links.
Der Algorithmus in englischer Sprache...
Ein Anker-element hat ein href-Attribut, enthält aber keinen text (oder nur Leerzeichen) und keine Bilder mit alternativem text."
Einen einfachen Weg den Fehler zu beheben ist, fügen Sie ein
aria-label
- Attribut der<a>
element:Was ich gefunden habe, um die beste option ist, um eine span - tag mit einer Klasse namens "sr-only", hinter der sich die tag aus einem normalen Nutzer, sondern ermöglicht Screenreadern, um es zu sehen. (Ich denke, es ist wie Bootstrap verwaltet diese Situationen.) Hier ist ein Beispiel:
Als Sie bemerkte, Ihr link enthält keine Inhalte. Ja, es enthält eine
i
element, aber es ist leer.Ich nehme an, du möchtest ein Bild via CSS. Aber dies ist nicht zugänglich. User-agents ohne CSS-Unterstützung oder Benutzer, können keine Bilder wahrnehmen, werden nicht in der Lage, diese Verbindung zu benutzen.
Sollten Sie eine
img
element mit seinenalt
- Attribut statt; dies ist das richtige element für die Einbeziehung von Bildern, die nicht nur Dekoration.Wenn Sie haben Einsatz von CSS für das Bild einschließen, sollten Sie zumindest geben Sie text in das
a
element (die optisch versteckt per CSS, wenn sein muss). (Und Sie sollte nicht mit demi
- element für diesen Zweck.)Wenn Sie nicht schreiben können, etwas in den Anker-tag, können Sie fügen Sie ein
title
- Attribut auf Ihrea
tag: