CSS ile Daha İyi Tıklama Hedefi Boyutları Tasarlamak

• Butonları/bağlantıları/kartları tıklamayı/dokunmayı/tap etmeyi daha kolay ve yanlışlıkla basılması daha zor olacak boyutlarda tasarlamak
• "Hedef boyutu" için kullanılan adlar farklılık gösteriyor: Apple hit target, Google Material Touch target, WAI target size, Google Lighthouse Tap Target, tasarım topluluğu ise Clickable Area diyor
• WCAG ölçütlerine göre hedef boyutu en az 44 x 44 CSS piksel olmalı (Android'de 48x48)
  • Bunun altına düşüldüğünde dokunma daireleri üst üste binebilir ve yanlış tıklamalar oluşabilir
• Google Design for Driving'de minimum 76dp x 76dp öneriliyor
• Görsel hedef geri bildirimi vermek iyi olur (öğeye kenarlık ya da ters çevrilmiş arka plan gibi)
• 24x24'ten küçük hedeflerde yeterli boşluk bırakmak gerekir (line-height: 1.4, padding: 1rem gibi)
• ProgressBar için de height değerini artırarak yeterli dokunma alanı sağlamak iyi olur
• Aynı eylemi veren nesneler arasında Dead Target Area'yı kaldırmak
• :before ve :after gibi pseudo elementleri kullanarak hedef boyutunu büyütmek
• label için mutlaka for kullanarak hedef boyutunu genişletmek
• Checkbox'larda padding-block kullanarak hedef boyutunu büyütmek
• Butonlara/metin bağlantılarına da padding eklemek
• Liste öğelerinde padding ve display:flex ile tüm öğe boyutuna yaymak
• Hedef boyutu test yöntemleri: DevTools kullanmak, CSS outline uygulamak, Polypane tarayıcısını kullanmak

[hohpark]

İçerik o kadar harika ki yazara bakınca Ahmad Shadeed olduğunu gördüm. Bu kişinin yazılarına bakınca gerçekten hayran kalmamak elde değil.