Bu kural ne anlama geliyor

WCAG 2.5.8, tüm etkileşimli öğeler için 24x24 CSS piksel minimum hedef boyutu belirler. Bu, WCAG 2.2 de tanımlanan AA Düzeyi gereksinimidir ve kullanılabilirlik ile tasarım esnekliği arasında denge sağlayan pratik bir minimum sunar. Kriter 2.5.5 teki gelişmiş 44px hedef, AAA önerisi olarak kalır.

24px minimum, isabet bolgesini genişleten herhangi bir padding dahil olmak üzere tüm tıklanabilir/dokunulabilir alana uygulanır. Bir hedef 24px den kucukse, hedefin merkezindeki 24px cemberin başka herhangi bir hedefle cakismamasi için bitişik hedeflerden yeterli araliga sahip olmalıdır. Bu, "dengelemeli küçük hedef" istisnası olarak bilinir.

Neden önemlidir

24px minimum hedef boyutu, motor engelli kullanıcıların güvenilir şekilde etkinlestirebilecegi en küçük makul hedef olduğunu gösteren araştırmalara dayanilarak secilmistir. 44px optimum olmakla birlikte, 24px minimum bazı arayüz kaliplarinin kompakt düzenler gerektirdigini kabul eder. Aralık gereksinimi, küçük hedeflerin bile yanlislikla komsularini vurmadan etkinlestirilebilmesini sağlar.

Bu kriter, sayfadaki her etkileşimli öğe için geçerli olduğu için WCAG 2.2 eklemelerinin en geniş etkiye sahip olanıdır. Gezinme bağlantıları, araç çubuğu düğmeleri, form kontrolleri, sayfalama, etiket listeleri ve satır içi eylemler 24px eşiğini karşılamalı veya yeterli aralık kullanmalıdır.

İlgili axe-core kuralları

target-size — Etkileşimli öğelerin minimum 24x24 CSS piksel hedef boyutunu karşılamasını veya bitişik hedeflerden yeterli araliga sahip olmasını sağlar. Bu kural tıklanabilir öğelerin sınır kutusunu kontrol eder ve komsulariyla çakışan küçük hedefleri işaretler.

Nasıl test edilir

axe-core veya axe DevTools çalıştırın — target-size kuralı yeterli aralığı olmayan 24x24 pikselden küçük öğeleri isaretleyecektir.
Etkileşimli öğelerin hesaplanan boyutunu (padding dahil) incelemek için tarayıcı DevTools kullanın.
24px den küçük hedefler için, bitişik hedeflerden araliklamanin en az 24px cakismayan bir bölge sağladığını doğrulayın.
Kompakt UI kalıplarını kontrol edin: araç çubukları, etiket listeleri, içerik haritası bağlantıları, sayfalama ve satır içi eylemler.
Küçük hedeflerin yanlış etkinlestirme olmadan güvenilir şekilde dokunulabildgini doğrulamak için dokunmatik cihazlarda test edin.

Nasıl düzeltilir

Etkileşimli öğelerin 24px minimumu karşılamasını veya yeterli aralık sağlamasını sağlamak için CSS kullanın.

CSS ile minimum hedef boyutu

/* Temel etkileşimli öğe boyutlandırma */
button,
a,
input,
select,
textarea,
[role="button"],
[role="link"],
[role="tab"],
[role="checkbox"],
[role="radio"] {
  min-width: 24px;
  min-height: 24px;
}

Minimum boyutu karşılayan simge düğmesi

<!-- Yanlış: Genişletilmiş hedef olmadan 16px simge -->
<button class="simge-btn-küçük">
  <svg width="16" height="16" aria-hidden="true">...</svg>
  <span class="görsel-gizli">Kapat</span>
</button>

<style>
/* Yanlış: hedef yalnızca 16x16 */
.simge-btn-küçük {
  padding: 0;
  border: none;
  background: none;
}
</style>

<!-- Doğru: Genişletilmiş tıklanabilir alana sahip 16px simge -->
<button class="simge-btn">
  <svg width="16" height="16" aria-hidden="true">...</svg>
  <span class="görsel-gizli">Kapat</span>
</button>

<style>
/* Doğru: padding hedefi en az 24x24 e genişletir */
.simge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  border: none;
  background: none;
}
</style>

Kompakt düzenler için aralık yaklaşımı

/* Hedefler 24px den küçük olmak zorundaysa,
   aralarında yeterli aralık sağlayın */
.etiket-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Küçük etiketler arasi aralık */
}

.etiket {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 12px;
}

/* Satirici bağlantı aralığı */
.satır içi-eylemler a {
  padding: 4px;
  margin: 0 4px;
  /* 16px metin üzerinde 4px padding ile 24px hedef sağlar */
}

Duyarlı hedef boyutlandırma

/* Hedef boyutu için asamali iyilestirme */
.eylem-düğmesi {
  min-width: 24px;
  min-height: 24px;
  padding: 4px 8px;
}

/* Dokunmatik cihazlarda daha büyük hedefler */
@media (pointer: coarse) {
  .eylem-düğmesi {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
  }
}

Sık yapılan hatalar

Tiklanabilir alanı genisletmek için padding olmadan küçük simge düğmeleri (16px veya 20px).
24px den küçük baglantilara ve aralık telafisi olmayan yoğun gezinme menüleri.
Hedeflenmesi zor olan küçük kapat/kaldir dugmelerine sahip etiket veya çip bileşenleri.
Özellikle mobil görünüm alanlarında yetersiz yukseklikteki içerik haritası bağlantıları.
Tiklanabilir etiket alanını genisletmeden 24px den küçük stile sahip özel onay kutuları veya radyo düğmeleri.
Tiklanabilir alana katkıda bulunan paddingi hesaba katmadan görsel öğe boyutuna dayanmak.

2.5.8 Hedef Boyutu (Minimum)