Ana içeriğe geç

2.5.5 Hedef Boyutu

Etkileşimli hedefler, sınırlı motor kontrolüne sahip kullanıcılar için hata riskini azaltacak şekilde yeterince büyük olmalıdır.

SC Kodu: 2.5.5 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#target-size-enhanced

Genel Tanım​

WCAG 2.5.5, dokunmatik veya işaretçi ile etkileşime girilen hedeflerin (buton, bağlantı, ikon vb.) yeterince büyük olmasını zorunlu kılar. Bu kriter, özellikle mobil cihazlarda veya motor kontrol zorluğu yaşayan kullanıcılar için küçük hedeflerin yanlış tıklanmasını önlemeyi amaçlar.

Faydalar​

  • Yanlış Tıklamayı Azaltır
  • Mobil Kullanılabilirliği Artırır
  • Motor Engelli Kullanıcıları Destekler
  • Genel Kullanıcı Deneyimini İyileştirir

Kapsam

  • Butonlar
  • Menü öğeleri
  • İkon bağlantılar
  • Form kontrolleri
  • Mobil navigasyon öğeleri

Ana Amaç​

Bu kriterin temel amacı, özellikle motor engelli kullanıcıların, titreme yaşayan bireylerin, dokunmatik ekran kullanıcılarının ve küçük ekranlarda gezinen kişilerin etkileşimleri güvenli ve kolay şekilde gerçekleştirebilmesini sağlamaktır.

Gereksinimler

  • Etkileşimli hedef alanı en az 44 × 44 CSS piksel olmalıdır
  • Hedefler arasında yeterli boşluk bulunmalıdır
  • Küçük görünen öğeler için dokunma alanı büyütülmelidir

İstisnalar

  • Metin içi bağlantılar
  • Alternatif büyük kontrol mevcutsa
  • Kullanıcı aracısı tarafından kontrol ediliyorsa

En İyi Uygulamalar​

  • Minimum 44x44 px dokunma alanı sağlayın
  • Küçük ikonlara görünmez padding ekleyin
  • Tıklanabilir alanı görsel boyuttan daha geniş yapabilirsiniz
  • Öğeler arasında yeterli boşluk bırakın

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

HTML/CSS

.button {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

Bu kullanım, etkileşim alanının yeterli boyutta olmasını sağlar ve WCAG 2.5.5 kriterini karşılar.

Nelerden Kaçınılmalı?

HTML/CSS

.icon-btn {
  width: 20px;
  height: 20px;
}

Açıklama:

20x20 piksel boyutundaki bir hedef, mobil ve motor engelli kullanıcılar için çok küçüktür. Yanlış tıklama riski yüksektir ve WCAG 2.5.5 kriterini karşılamaz.

Alternatif Çözüm (Görünmez Alan Büyütme)

HTML/CSS

.small-icon {
  position: relative;
  width: 24px;
  height: 24px;
}
.small-icon::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

Bu yöntemle görsel küçük kalırken etkileşim alanı 44x44 px seviyesine çıkarılabilir.