Bağlantı Dalga erişilebilirlik değerlendirme aracında metin gösteren hata içeriyor

Question

Ben her ne kadar ben, bir HTML sayfası olan

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

ama dalga erişilebilirlik aracından bu bağlantı etiketi hiçbir metin içeren bir hata gösteriyor yoktur var <a> etiketinin içinde <i> etiketini kullanarak, ancak çapa etiketinin içine hiçbir şey yazamıyorum.

Answer 1

Farkettiğiniz gibi, bağlantınız hiçbir içerik içermiyor. Evet, bir i öğesi içeriyor, ancak boş.

CSS ile görüntü eklemek istediğinizi varsayalım. Ancak bu erişilebilir değildir. CSS desteği olmayan kullanıcı temsilcileri veya resimleri algılayan kullanıcılar bu bağlantıyı kullanamaz.

img öğesinin yerine alt özniteliği kullanmalısınız; Bu sadece dekorasyon olmayan görüntüleri dahil etmek için doğru elemandır.

görüntüyü içeren için CSS kullanmak sahip varsa, en azından (olmalıdır eğer görsel, CSS ile gizlenmiş olabilir) a eleman bir metin sağlamalıdır. Eğer çapa etiketinin içine bir şey yazamazsınız ise (. Ve bu amaçla should not use the i element)

Answer 2

, kendi a etiketine bir title özelliğini ekleyebilirsiniz: Ben bulduk Ne

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

Answer 3

iyi olmak için Bu seçenek, etiketi düzenli bir kullanıcıdan gizleyen "sr-only" isimli bir sınıfa sahip span etiketini eklemektir, ancak ekran okuyucularının onu görmesine izin verir. (Ben Bootstrap bu durumları nasıl yönettiğini olduğunu düşünüyorum.) İşte bir örnek:

<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

hem WCAG 2.0 Guideline 2.4.4 "Link Purpose (In Context)" ihlal Boş Linkler ihtiva sağlanan WAVE tool iki <a> elemanlarına göre. DALGA aracından

:

"O bir bağlantı yok metni içeren Anlamı bir bağlantı hattının herhangi bir metin, fonksiyon veya amaca içeriyorsa O Neden Önemli

. Bu kullanıcı, klavye ve ekran okuyucu kullanıcıları için karışıklık getirebilir

Nasıl Kurulur Boş bağlantıyı kaldırın veya bu bağlantının işlevselliğini ve/veya hedefini açıklayan bağlantı içinde metin sağlayın.

Algoritma ... İngilizce An çapa eleman bir href özniteliği vardır, ancak hiçbir metin (ya da yalnızca boşluk) ve alternatif metin ile resim yok."

hatayı düzeltmek kolay bir yolu bir aria-label attribute<a> elemana eklemektir:.. Ben zaten uygulanan html değiştiremezsiniz talimatına göre

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