link zawierać żadnego błędu tekst pokazujące narzędzie oceny dostępność Wave

Question

Mam strona HTML, w którym znajduje

<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> 

ale z fal narzędzia dostępności to pokazuje błąd, że znacznik kotwica nie zawiera tekstu, chociaż jestem używając tagu <i> wewnątrz znacznika <a>, ale nie mogę napisać nic w znaczniku zakotwiczenia.

Answer 1

Jak zauważyłeś, Twój link nie zawiera żadnych treści. Tak, zawiera element i, ale jest pusty.

Zakładam, że chcesz dodać obraz za pomocą CSS. Ale to nie jest dostępne. Aplikacje klienckie bez obsługi CSS lub użytkownicy, którzy nie mogą odbierać obrazów, nie będą mogli użyć tego linku.

Powinieneś użyć elementu img z jego atrybutem alt; jest to właściwy element do umieszczania obrazów, które nie są jedynie ozdobą.

Jeśli masz użyć CSS na tym wizerunku, należy zapewnić przynajmniej jakiś tekst w elemencie a (które mogą być wizualnie ukryte za pomocą CSS, jeśli musi być). (. A ty should not use the i element do tego celu)

Answer 2

Jeśli nie można napisać coś wewnątrz znacznika zakotwiczenia, można dodać atrybut title do tagu a:

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

Answer 3

Co znalazłem się być najlepszym opcja to dodanie znacznika o numerze z klasą o nazwie "sr-only", która ukrywa znacznik od zwykłego użytkownika, ale pozwala czytnikom ekranu go zobaczyć. (Myślę, że to jest jak Bootstrap zarządza tymi sytuacjami). Oto przykład:

<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

Według WAVE tool dwóch <a> elementów przewidzianych zarówno ty Puste zawierają linki, które naruszają WCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)".

Z narzędzia fali:

"co to oznacza Link nie zawiera tekstu

Dlaczego to ważne Jeśli link nie zawiera tekstu, funkcję lub cel link. Może to wprowadzić w błąd użytkowników klawiatury i czytnika ekranu.Usuń puste łącze lub podaj tekst w łączu, który opisuje funkcjonalność i/lub cel tego łącza.

Algorytm ... w języku angielskim Element kotwica ma atrybut href, ale nie zawiera tekstu (lub tylko spacje) i bez obrazy z alternatywnym tekstem."

Prostym sposobem, aby naprawić ten błąd jest dodanie aria-label attribute do elementu <a>:..

<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>