Bağlantı Tasarımı: Alt Çizgi, Focus Hali ve Tıklama Alanı
Bağlantı tasarımının işi tek cümlede biter: kullanıcı neyin tıklanabilir olduğunu bakar bakmaz anlasın. Pratikte bu basit kural altı çizgisi kaldırılmış temalar, silinmiş focus halleri ve birbirinden ayırt edilemeyen ziyaret renkleri yüzünden sürekli bozuluyor. Aşağıdakiler hangi kararın nerede işe yaradığı, sırayla.
Renk tek başına yetmiyor
Varsayılanı bozmayın: metin içindeki bağlantı hem renkli hem altı çizili olsun. Renk körü kullanıcılar bir yana, parlak ekranda düşük kontrastlı bir mavi hiç kimseye bağlantı demez.
WCAG’ın Use of Color ölçütü bunu somut bir eşiğe bağlıyor: bağlantı rengi ile çevresindeki gövde metni arasında en az 3:1 kontrast olacak, ve hover ile focus durumunda renk dışında bir işaret belirecek. Alt çizgi ikisini aynı anda karşıladığı için en ucuz çözüm. Rengi tek başına yeterli sanıp bu eşiği ölçmeyen tasarımların çoğu testi geçemez.
İstisna navigasyon menüsü, kart ve buton gibi konumu zaten tıklanabilirlik vaat eden alanlardır. Oralarda alt çizgi gürültü yapar. Ters yönü de aynı derecede bağlayıcı: bağlantı olmayan hiçbir metnin altını çizmeyin. Vurgu istiyorsanız em veya kalın var.
Ziyaret edilmiş bağlantı ve tarayıcının koyduğu sınır
Ziyaret edilmiş bağlantıyı daha soluk bir tonla göstermek, uzun listelerde kullanıcının nerede kaldığını hatırlamasını sağlar. İki ton birbirine yakın kalsın, aksi halde aynı sayfada iki ayrı bağlantı sistemi varmış gibi görünür.
Burada tasarım tarafında sık atlanan bir kısıt var. Tarayıcılar :visited üzerinde geçmiş sızdırma riski yüzünden yalnızca bir avuç özelliğe izin verir: color, background-color, border-color, outline-color ve benzerleri. Yani :visited seçicisine ikon, content, farklı yazı tipi ya da kalınlık ekleyemezsiniz; getComputedStyle de size ziyaret edilmemiş halin değerlerini döndürür. “Renk ayrımını bir ikonla destekleyelim” tavsiyesi kulağa erişilebilir geliyor ama ziyaret durumu için teknik olarak uygulanamaz. Renk körü bir kullanıcı ziyaret ayrımını fark edemiyorsa yapabileceğiniz tek şey iki ton arasındaki açıklık farkını büyütmek, ikon aramak değil.
Hover süsleme, focus zorunluluk
Hover’da metni kalınlaştırmayın; satır genişliği değişir, paragraf oynar. Alt çizgi baştan yoksa hover’da eklenebilir, o kadarı yeter.
title özniteliğini bağlantı hedefini açıklamak için kullanmayın. Dokunmatik ekranda hiç görünmez, klavyeyle gezen kullanıcı tetikleyemez, ekran okuyucularda okunup okunmaması ayara bağlıdır. Yani bilgiyi oraya koyarsanız kullanıcıların büyük kısmı o bilgiyi hiç görmez. Söylenmesi gereken neyse bağlantı metninin kendisinde söylensin.
Asıl iş focus halinde. Klavyeyle gezen biri için focus halkası, farenin imlecine karşılık gelen tek şey. :focus-visible ile belirgin bir outline verin, outline-offset ile metinden bir iki piksel ayırın. Kopyala yapıştır CSS reset’lerindeki outline: none satırı hâlâ en sık karşılaştığım erişilebilirlik hatası (üstelik yerine hiçbir şey konmadan silinmiş oluyor).
Tıklama alanı: punto değil, hedef boyutu
“Bağlantılar en az 12 punto olsun” tavsiyesi web’de boşa gider. 12 punto 16 piksele denk düşer, bu da zaten tarayıcı varsayılanı. Gövde metnini varsayılanın altına indirmediğiniz sürece punto sizin probleminiz değil.
Problem hedef alanının kendisi. WCAG 2.2 dokunma hedefleri için 24×24 CSS pikseli alt sınır koyuyor; paragraf içindeki satır içi bağlantılar bu kuraldan muaf, çünkü boyutları satır yüksekliğiyle sınırlı. Kural asıl olarak liste, footer, sayfalama ve etiket bulutu gibi bağlantıların yan yana yığıldığı yerlerde işler. Çözüm basit: a etiketine padding verin, kapsayıcıya margin değil. Satır içi bir elemanda dikey padding tıklama alanını büyütür ama komşu satırları itmez, o yüzden liste bağlantılarını inline-block ya da block yapmadan ölçü tutmaz.
Bağlantı metni
“Buraya tıklayın”, “devamı”, “daha fazla bilgi” gibi metinlerden kaçının. Ekran okuyucu kullanıcıları sayfadaki bağlantıları ayrı bir liste olarak gezebiliyor; o listede yan yana duran beş tane “devamı” hiçbir şey ifade etmez. Bağlantı metni, cümleden kopartıldığında bile nereye gittiğini söylüyorsa doğrudur.