Bu kural ne anlama geliyor

WCAG 2.5.5, tüm etkileşimli hedeflerin (düğmeler, bağlantılar, form kontrolleri, özel etkileşimli öğeler) en az 44x44 CSS piksel boyutunda olmasını gerektirir. Bu, gelişmiş (AAA) gerekliliktir — WCAG 2.2 de AA Duzeyinde tanımlanan minimum hedef boyutu gereksiniminin (2.5.8) daha sıkı bir versiyonudur.

Esdeger kontroller (daha büyük bir alternatif saglandiginda), metin içindeki satır içi bağlantılar, boyutu kullanıcı ajanı tarafından belirlenen hedefler (yerel onay kutuları gibi) ve belirli boyutun iletilen bilgi için zorunlu olduğu hedefler için istisnalar mevcuttur.

Neden önemlidir

Küçük dokunma hedefleri, mobil cihazlarda en yaygın kullanılabilirlik engellerinden biridir. Motor engelli, titremeli veya sınırlı ince motor kontrolüne sahip kullanıcılar küçük hedeflere doğru dokunmakta zorlanır. Yasli yetiskinler yaslanmanin doğal bir parçası olarak azalmis hassasiyet yasarlar. Engeli olmayan kullanıcılar bile telefonu tek eliyle veya hareket halindeyken küçük hedeflere sıklıkla yanlış dokunurlar.

MIT Dokunma Laboratuvari nın arastirmalari, yetiskin parmak ucu genisliginin yaklaşık 10mm olduğunu ve bunun standart yogunlukta kabaca 44 CSS piksele karşılık geldiğini göstermiştir. Bu eşiğin altındaki hedefler, tüm kullanıcılar için hata oranlarini önemli ölçüde arttırır.

İlgili axe-core kuralları

44px gelişmiş hedef boyutu için özel otomatik axe-core kuralı bulunmamaktadır. axe-core deki target-size kuralı WCAG 2.5.8 (AA Düzeyi) den gelen 24px minimumunu kontrol eder. 44px eşiği için manuel ölçüm veya özel araç gerektir.

Nasıl test edilir

Etkileşimli öğelerin hesaplanan boyutunu incelemek için tarayıcı DevTools kullanın.
Hem genişlik hem de yükseklik ölçün — her ikisi de en az 44 CSS piksel olmalıdır.
Yalnızca görünen içerik boyutunu değil, padding ve tıklanabilir alaninida kontrol edin.
Yalnızca dokunma emulasyonuyla masaüstü tarayıcılarda değil, gerçek dokunmatik cihazlarda test edin.
Simge düğmeleri, kapatma düğmeleri, sayfalama bağlantıları ve yoğun duzenlerdeki form kontrollerine özellikle dikkat edin.

Nasıl düzeltilir

Etkileşimli hedeflerin 44px minimumunu karşılamasını sağlamak için CSS min-width ve min-height kullanın.

Dugme boyutlandırma — CSS yaklaşımı

/* Tüm düğmelerin 44px minimumunu karşıladığını sağlayın */
button,
[role="button"],
a.btn {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
}

/* Simge düğmeleri açık boyutlandırma gerektirir */
.simge-düğme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

Padding ile tıklanabilir alanı genişletme

/* Genişletilmiş dokunma alanına sahip küçük görsel hedef */
.kapat-düğmesi {
  /* Görsel boyut: 16x16 simge */
  width: 16px;
  height: 16px;
  /* Padding ile genişletilmiş dokunma alanı */
  padding: 14px;
  /* Toplam tıklanabilir alan: 44x44 */
  box-sizing: content-box;
  cursor: pointer;
}

/* Veya düzeni korumak için negatif margin kullanın */
.kompakt-kapat {
  min-width: 44px;
  min-height: 44px;
  margin: -14px;
  padding: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Gezinme bağlantı araliklari

<nav aria-label="Sayfalama">
  <ul class="sayfalama">
    <li><a href="/sayfa/1" class="sayfa-bağlantısı">1</a></li>
    <li><a href="/sayfa/2" class="sayfa-bağlantısı">2</a></li>
    <li><a href="/sayfa/3" class="sayfa-bağlantısı">3</a></li>
  </ul>
</nav>

<style>
.sayfa-bağlantısı {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}
</style>

Sık yapılan hatalar

Genişletilmiş dokunma alanı olmadan yalnızca 24px veya 32px boyutundaki simge düğmeleri (kapat, menü, ayarlar).
Çok küçük ve birbirine çok yakın olan, yanlış dokunmalara neden olan sayfalama bağlantıları.
Tiklanabilir alanı genisletmeden tarayıcı varsayılan boyutuna dayanan form onay kutuları ve radyo düğmeleri.
Dokunma hedefini genisletmek için padding eklemek yerine tıklanabilir alan için yalnızca simge boyutunu kullanmak.
Dogruca hedeflenmesi zor olan küçük ve birbirine yakın dugmelere sahip yoğun araç çubukları.

2.5.5 Hedef Boyutu (Gelişmiş)