<span>'un iki farklı kullanımı: erişilebilirlik için en iyi çözüm hangisidir?

Question

Bir web sayfasındaki başka bir metinle birlikte bir metin parçasını bir görüntüyle (örneğin, bir telefon simgesiyle "ara" kelimesiyle)) değiştirmek istiyorum. Bu görüntüler [zeyilname] göremiyorum css devre dışı bırakma (veya css aktif olmayan) insanlar ve kör insanlar olumsuz etkilemeden, normal kullanıcı için çalışmak istiyorum. Aşağıdaki iki olanlar arasındaki daha iyi çözüm hangisidir?

1.  <span title="call" class="s1"><span> 


2.  <span class="s1 s2">call<span> 

ile:

.s1 { 
    display:inline-block; 
    background: url("call.png") no-repeat scroll 0 0 transparent; 
    width:24px; 
} 
.s2 { 
    overflow:hidden; 
    text-indent: 30px; 
} 

P.S. .: hayır <img> alternatif, lütfen. Verilen iki alternatifi Arasında

Answer 1

SPAN çok genel bir öğedir ve daha iyi bir biçimlendirme elemanı amaç için uygundur zaman kullanılmalıdır. Sizin durumunuzda, A (ankraj) tam da ihtiyacınız olan şeydir, "çağrı" elemanınız varsa, kullanıcı aracısının saf metinden ayırt etmesi gereken bir şeydir. href'u kullanmasanız bile, hala bir bağlantıdır - JavaScript ile bir fare olayına bağlamanız yeterlidir.

Ayrıca burada arka plan resimlerini kullanarak yersiz sayılmaz. Arka plan görüntüleri arka planlar içindir. Aslında, kullanıcı aracıları, aktif kullanıcı arabiriminin bir parçası olarak bunlara tıklamaya bile kalkmamalıdır (sadece çok ikincil bir etkileşim olarak). Eğer peşindeyseniz bir "Çağrı" düğmesi ise, bunun yerine CSS content özelliğini kullanın. Ancak, img hakkında haklısınız - bu, sayfa içeriğini taşıyan, gezinme yerine sahip olmayan görseller içindir. Yani düğmeler, çapalar ve benzerleri img etiketini kullanmamalıdır. Bağlamaya bağlı olarak input veya button'u da kullanabilirsiniz (sorunuzdan söyleyemezsiniz). Sen işaretlenmiş sizin çapa boyutunu ayarlayabilirsiniz

<a class="s1" title="Call the following number">Call</a> 

.s1 
{ 
    content: url(call.png); 
} 

:

Eğer gerçekten doğru yolda olan, sayfalarınızda erişilebilir hale getirmek isteriz, ama gerçekten şu daha iyi bir alternatif olduğunu düşünüyorsanız

CSS width ve height kullanarak s1 sınıfı ile. Bunun yerine bir SVG kullanırdım. Grafiğiniz vektör ise, kesinlikle daha iyi bir fikirdir. CSS devre dışı

.s1:after 
{ 
    content: "Call"; 
} 

Answer 2

, 2, yani açıkça erişilebilirlik az zararlı olduğunu, açıkça doğru cevaptır. CSS kapalı olduğunda, eleman “çağırma” kelimesine geçer, alternatif 1 ise boş dizgeye indirger. Bazı yazılımların title özniteliğinin değerini bildirebileceği garantisi yoktur. Örneğin, bir ekran okuyucusu olmaksızın (örneğin, CSS sayfasını geçersiz kılan ve kullanıcı için yeterli büyük bir yazı tipini zorunlu kılan ayarlarla), sadece görsel modda normal bir grafik tarayıcının kullanılması düşünülmelidir.

Hatta alternatif 2 erişilebilirlik için kötüdür. CSS etkinken, “çağrı” kelimesi bir simge ile değiştirilir. Ancak, kullanıcının bunu görebileceği konusunda hiçbir garanti yoktur. İçerik görüntüleri için yapabileceğiniz bir arka plan görüntüsü için alt metnini belirtmenin bir yolu yoktur. Dahası, telefon simgesi olarak ne kullanırdınız? Bu tarz ikonların çoğu eski tarz, ☎ veya ✆ gibi, ve daha önce hiç böyle bir cihaz kullanmayan daha çok insan var.