1. Ana sayfa
  3. Tasarım
  5. Dokunma Alanı Boyutu Kontrolü

Dokunma Alanı Boyutu Kontrolü

Buton veya bağlantı boyutunu WCAG 2.2, Apple HIG ve Material Design dokunma alanı önerilerine göre kontrol edin.

Tarayıcınızda çalışır Ücretsiz

Yönergeler farklıdır: WCAG yasal nitelikte bir minimum belirler, platform kılavuzları ise rahat boyutlar önerir. Varsayılan yakınlaştırmada 1 CSS px ≈ 1 iOS pt ≈ 1 Android dp.

Küçük butonlar kullanıcıları kaybettirir

Mobil cihazlarda küçük butonlara ve birbirine çok yakın bağlantılara dokunmak zordur; bu durum hatalı tıklamalara, kullanıcı hayal kırıklığına ve dönüşüm kaybına yol açar. Motor beceri sorunu yaşayan kişiler için ise ciddi bir erişilebilirlik engelidir.

Kontrol edilen standartlar

  • WCAG 2.2 AA (2.5.8): en az 24×24 CSS pikseli veya yeterli aralık
  • WCAG 2.2 AAA (2.5.5): en az 44×44 CSS pikseli
  • Apple Human Interface Guidelines: 44×44 nokta
  • Material Design: 48×48 dp

Görsel karşılaştırma

Butonunuzun genişliğini, yüksekliğini ve komşu öğelerle aralığını girin. Araç hangi yönergelerin karşılandığını gösterir ve hedef boyutlarla görsel bir karşılaştırma sunar.

Dokunma Alanı Boyutu Kontrolü nasıl kullanılır?

  1. Buton veya bağlantının genişliğini ve yüksekliğini girin.
  2. Komşu öğelerle arasındaki boşluğu belirtin.
  3. Hangi yönergelerin karşılandığını inceleyin.
  4. Gerekirse boyutu veya boşluğu artırın.

Neden bu aracı kullanmalısınız?

Mobil kullanılabilirliği ve erişilebilirliği tasarım aşamasında doğrulamanızı sağlar; Google'ın mobil kullanılabilirlik önerileriyle de uyumludur.

Sıkça sorulan sorular

Hangi boyutu hedeflemeliyim?

WCAG 2.2 AA en az 24×24 px ister (aralık istisnasıyla); 44×44 px (WCAG AAA, Apple) veya 48×48 dp (Material) daha rahattır.

Simge küçükse ne yapmalıyım?

Simgeyi büyütmeden iç boşluk (padding) ekleyerek dokunma alanını genişletebilirsiniz.

Metin içi bağlantılar da bu kurala tabi mi?

WCAG 2.2, cümle içindeki satır içi bağlantıları bu gereksinimden muaf tutar.

İlgili araçlar

Gizli

WCAG Kontrast Kontrolü

Metin ve arka plan renklerinin kontrast oranını WCAG AA ve AAA'ya göre kontrol edin.

Aracı aç
Gizli

PX REM EM Dönüştürücü

Kök ve üst öğe yazı boyutlarınıza göre pikselleri rem ve em birimine (ve tersine) çevirin.

Aracı aç
Gizli

CSS clamp() Oluşturucu

Ekran genişliğine göre en küçük ve en büyük boyut arasında akışkan şekilde ölçeklenen CSS clamp() değeri oluşturun.

Aracı aç
Gizli

Renk Skalası Oluşturucu (50–950)

Tek bir temel rengi CSS değişkenleri ve yapılandırma çıktısıyla Tailwind tarzı 50–950 ton skalasına dönüştürün.

Aracı aç