Verbindung enthält keinen Text zeigt Fehler in Wave-Zugänglichkeit Auswertungstool

Question

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 Wellen Zugänglichkeit Werkzeug es einen Fehler zeigt, dass der Anker-Tag keinen Text enthält, obwohl ich bin mit <i> Tag innerhalb der <a> Tag, aber ich kann nichts in Anker-Tag schreiben.

Answer 1

Wie Sie festgestellt haben, enthält Ihr Link keine Inhalte. Ja, es enthält ein i Element, aber es ist leer.

Ich nehme an, Sie möchten ein Bild über CSS hinzufügen. Aber das ist nicht zugänglich. Benutzeragenten ohne CSS-Unterstützung oder Benutzer, die keine Bilder erkennen können, können diesen Link nicht verwenden.

Sie sollten stattdessen ein img Element mit seinem alt Attribut verwenden; Dies ist das richtige Element für die Aufnahme von Bildern, die nicht nur Dekoration sind.

Wenn Sie haben CSS zu verwenden, um das Bild für die Aufnahme, sollten Sie zumindest einen Text in dem a Element liefern (die visuell über CSS verborgen sein könnte, wenn es sein muss). (. Und Sie should not use the i element für diesen Zweck)

Answer 2

Wenn Sie nichts in dem Anker-Tag schreiben können, können Sie ein title Attribut zu Ihrem a-Tag hinzu:

<a href="example.com" title="Visit example.com website"><i class="myclass"></i></a> 

Answer 3

Was ich gefunden habe, das Beste zu sein Die Option besteht darin, ein span Tag mit einer Klasse namens "sr-only" hinzuzufügen, die das Tag vor einem normalen Benutzer versteckt, es aber den Lesegeräten erlaubt, es zu sehen. (Ich denke, es ist, wie Bootstrap diese Situationen schafft.) Hier ein Beispiel:

<a href="example.com"> 
    <i class="myclass"></i> 
    <span class="sr-only">Visit example.com</span> 
</a> 

<style> 
.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    border: 0; 
} 
</style> 

Answer 4

Nach den WAVE tool den beiden <a> Elementen Sie beide Leere Links enthalten, die WCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)" verletzen.

Aus dem WAVE-Tool:

"Was es bedeutet, Ein Link keinen Text enthält

Warum es wichtig ist Wenn ein Link keinen Text enthält, die Funktion oder den Zweck der Verbindung. wird dem Benutzer nicht angezeigt Dies kann für Benutzer von Tastaturen und Bildschirmleseprogrammen Verwirrung stiften

So beheben Sie es Entfernen Sie den leeren Link oder geben Sie Text innerhalb des Links ein, der die Funktionalität und/oder das Ziel dieses Links beschreibt.

Der Algorithmus ... in Englisch Ein Ankerelement ein Attribut href, aber enthält keinen Text (oder nur Leerzeichen) und keine Bilder mit alternativem Text."

Ein einfacher Weg, um den Fehler zu beheben, ist ein aria-label attribute zum <a> Elemente hinzuzufügen:..

<a href="https://example.com" aria-label="first link"><i class="myclass"></i></a> 

<a href="https://www.google.com" class="cart visible-xs" aria-label="second link"><i class="t-icon t-icon-cart-xs-2"></i></a>