WCAG 2.5.8: Hedef Boyutu (Asgari)

Bu Kuralın Anlamı

WCAG 2.5.8 Hedef Boyutu (Asgari), WCAG 2.2 ile getirilen Seviye AA başarı ölçütüdür. İşaretçi girdileri için hedefin boyutunun en az 24×24 CSS piksel olması gerektiğini belirtir; ancak önemli bir istisna vardır: Hedefin kendisi 24×24 CSS pikselden küçükse, etrafında yeterli ofset boşluk bulunmalıdır; böylece toplam alan — boşluk dahil — her yönde 24×24 eşiğini karşılar. Başka bir deyişle, hedefin sınırlayıcı kutusu ile ona bitişik, başka hedeflerden arınmış boş alan birlikte yatayda 24 CSS piksele ve dikeyde 24 CSS piksele ulaşmalıdır.

Bu ölçüt, işaretçi olayı alabilen her öğe için geçerlidir: bağlantılar (<a>), butonlar (<button>), onay kutuları, radyo butonları, select kontrolleri, slider’lar, işaretçi olayı dinleyicisi olan özel bileşenler ve etkileşim ima eden bir ARIA rolü verilmiş herhangi bir öğe. Dekoratif görseller veya statik metin gibi etkileşimli olmayan öğelere, büyük olsalar bile, uygulanmaz.

Bir hedef, aşağıdakilerden en az biri doğru olduğunda bu ölçütü sağlar:

• Hedefin işlenmiş boyutu her iki boyutta da en az 24×24 CSS pikseldir.
• Hedef, bir veya her iki boyutta 24 CSS pikselden küçüktür, ancak hedefin kenarı ile en yakın bitişik etkileşimli öğe arasındaki ofset, hedef+ofset birleşik alanının en az 24×24 CSS piksel olmasını sağlayacak kadar büyüktür.
• Hedef, bir cümle veya metin bloğu içinde satır içi (inline) bir öğedir; bu tür hedeflerin yeniden akıtılması okuma düzenini bozacağı için açıkça kapsam dışı bırakılmıştır.
• Hedefin görsel boyutu tamamen tarayıcının varsayılan user-agent stil sayfası tarafından belirlenmiştir ve yazar bunu değiştirmemiştir — bu, yerel kontrol istisnasıdır.
• Aynı bilginin etkileşimli olmayan bir sunumu mevcuttur ve küçük hedef yalnızca alternatif bir yol olup, etkinleştirmenin tek yolu değildir.

Bir hedef, 24×24 CSS pikselden küçük ve telafi edecek kadar ofset boşluğu yoksa ve yukarıdaki istisnaların hiçbiri uygulanmıyorsa başarısız olur. Gerçek dünyadaki yaygın başarısızlık örnekleri arasında küçük, yalnızca ikon içeren butonlar (örneğin bir modal içindeki 16×16 kapatma ikonu), çok sıkışık, minimum padding’e sahip gezinme bağlantıları ve her ikonun 20×20 piksel, aralarında yalnızca 2px boşluk bulunan sosyal paylaşım ikon sıraları yer alır.

WCAG 2.5.8’in bir asgari gereklilik olduğunu belirtmek gerekir. İlgili AAA ölçütü 2.5.5 Hedef Boyutu (Geliştirilmiş), ofset boşluk istisnası olmaksızın en az 44×44 CSS piksel gerektirir ve birçok kullanılabilirlik rehberi, rahat bir dokunma hedefi için 44–48 CSS piksel önermektedir. 2.5.8’i karşılamak tabandır, tavan değil.

Neden Önemli

Motor bozukluklar, işaretçi hassasiyetini çok çeşitli şekillerde etkiler. Parkinson hastalığı, esansiyel tremor, serebral palsi, multipl skleroz, inme kaynaklı hemipleji veya tekrarlayan zorlanma yaralanmaları olan kişiler, işaretçiyi küçük bir hedefe güvenilir şekilde getiremeyebilir. Yaşlı yetişkinler de ince motor kontrolde doğal bir azalma yaşar: 65 yaş üstü kişilerin yaklaşık %15’i fare veya dokunmatik ekran kullanmada ciddi zorluk bildirmektedir. Klinik durumların ötesinde, durumsal olarak kısıtlı kullanıcılar — hareket halindeki bir otobüste akıllı telefonu tek elle tutan biri veya parmağı küçük bir telefon ekranına göre büyük olan biri — de çok küçük hedeflerle zorlanır.

Dünya Sağlık Örgütü’ne göre, dünya genelinde 1,3 milyardan fazla insan bir tür engelle yaşamaktadır ve motor bozukluk en yaygın kategorilerden biridir. Etkileşimli öğeler çok küçük veya birbirine çok yakın olduğunda, bu kullanıcılar yanlışlıkla etkinleştirmeler, kaçan dokunuşlar ve siteyi fiilen kullanılamaz hale getiren tekrarlayan hatalar yaşar. Bu hayal kırıklığı, tıklamaya karar vermeden önce imleç konumunu doğrulamak için hover durumunun bulunmadığı dokunmatik cihazlarda daha da artar.

Somut bir senaryo düşünün: Elektronik satan bir Türk e-ticaret sitesi, her ürün sayfasının üst kısmında, her biri 18×18 piksel ve aralarında 3px boşluk olan beş sosyal paylaşım ikonu gösteriyor. Esansiyel tremoru olan bir kullanıcı, bir ürünü WhatsApp’ta paylaşmaya çalışırken sürekli yanlış ikona dokunuyor ve istenmeyen Facebook paylaşımlarını tetikliyor. Bu paylaşımları hızlıca geri almasının bir yolu yok ve görev o kadar hataya açık hale geliyor ki tamamen vazgeçiyor. Her ikonu 24×24 CSS piksele çıkarmak veya tıklanabilir alan 24×24’e ulaşacak şekilde padding eklemek, görsel tasarımı önemli ölçüde değiştirmeden sorunu çözer.

Erişilebilirliğin ötesinde, yeterli hedef boyutu daha yüksek dönüşüm oranları, daha düşük hemen çıkma oranları ve etkileşime hazır olma ile ilgili daha iyi Core Web Vitals skorlarıyla ilişkilidir. Arama motorlarının mobil öncelikli indekslemesi de iyi dokunma kullanılabilirliği sunan sayfaları tercih eder; bu da hedef boyutunu erişilebilirlik ve SEO’nun kesiştiği bir faktör haline getirir.

İlgili Axe-core Kuralları

• target-size (experimental): Bu kural, etkileşimli öğelerin işlenmiş boyutunun en az 24×24 CSS piksel olup olmadığını veya daha küçük öğeler için, toplam erişilebilir alan eşiği karşılayacak kadar yeterli ofset boşluğu bulunup bulunmadığını kontrol eder. Kural, odaklanabilir ve işaretçiyle etkileşimli öğelerin hesaplanmış boyutlarını ve sınırlayıcı dikdörtgenlerini sorgular ve boyut-veya-ofset testinde başarısız olanları işaretler. Şu anda experimental olarak işaretlendiği için axe-core’un varsayılan kural setine dahil değildir ve runOnly: { type: 'tag', values: ['wcag22aa', 'experimental'] } ile veya axe DevTools’ta deneysel kuralları etkinleştirerek açıkça etkinleştirilmelidir. Kural, satır içi metin bağlantıları ve tarayıcıların platformlar arasında farklı boyutlandırdığı yerel kontroller için yanlış pozitifler üretebilir; bu nedenle otomatik taramadan sonra her zaman manuel inceleme önerilir. Karmaşık CSS yerleşimleri, transform’lar veya üst üste binen z-index yığın bağlamları söz konusu olduğunda, boşluğa dayalı geçişleri güvenilir şekilde tespit edemez; bu yüzden DevTools’ta hesaplanmış stillerin manuel incelenmesi kritik önemdedir.

Hedef boyutu görsel işleme, hesaplanmış CSS, viewport boyutları ve komşu etkileşimli öğelerin yakınlığına bağlı olduğundan, otomatik araçlar bariz başarısızlıkları işaretleyebilir ancak insan yargısının yerini alamaz. Bir araç bir butonun sınırlayıcı kutusunu ölçebilir, ancak iki bitişik hedef arasındaki ofsetin gerçekten diğer etkileşimli öğelerden arınmış olup olmadığını — özellikle dinamik veya JavaScript ile yönetilen arayüzlerde — belirlemek manuel doğrulama gerektirir.

Nasıl Test Edilir

1. axe DevTools ile otomatik tarama: axe DevTools tarayıcı eklentisini kurun. Test edilecek sayfayı açın. axe DevTools panelinde, taramayı çalıştırmadan önce deneysel kuralları etkinleştirin (kural etiket filtresini bulun ve experimental ekleyin). Tarama tamamlandıktan sonra sonuçları target-size kural kimliğine göre filtreleyin. İşaretlenen her öğe için bildirilen boyutları not edin. Deneysel kuralların yanlış pozitif oranı daha yüksek olduğundan, bulguyu kesin bir başarısızlık olarak kaydetmeden önce manuel olarak doğrulayın.
2. Lighthouse ile otomatik tarama: Chrome DevTools’ta veya CLI üzerinden bir Lighthouse erişilebilirlik denetimi çalıştırın. Lighthouse, 48×48 CSS pikselden küçük ve yetersiz boşluğa sahip hedefleri kontrol eden bir dokunma hedefleri denetimi içerir — bunun WCAG 2.5.8’den daha sıkı bir eşik kullandığını unutmayın; bu nedenle Lighthouse başarısızlıkları, WCAG başarısızlıklarının bir üst kümesidir. Raporda işaretlenen öğeleri inceleyin ve hangilerinin gerçek Seviye AA başarısızlığı, hangilerinin en iyi uygulama önerisi olduğunu belirlemek için 24×24 WCAG eşiğiyle karşılaştırın.
3. Tarayıcı DevTools ile manuel ölçüm: DevTools’u açın ve her etkileşimli öğeyi inceleyin. Computed panelinde width ve height değerlerini kontrol edin. Herhangi biri 24px’in altındaysa, Box Model görünümüne geçin ve padding değerine bakın. Padding hedefi 24×24’e getiriyorsa, geçer. Aksi halde, öğenin sınırlayıcı dikdörtgenini kullanarak en yakın bitişik etkileşimli öğeye olan boşluğu ölçün: konsolda document.querySelector('your-selector').getBoundingClientRect() çalıştırın ve komşu öğelerin koordinatlarıyla karşılaştırın. Her boyuttaki birleşik boşluk etkin erişilebilir alanı 24px’e getiriyorsa, geçer.
4. Dokunma simülasyonu: Chrome DevTools’ta cihaz öykünmesini etkinleştirin ve dokunma için optimize edilmiş bir cihaz profilini seçin. Her küçük etkileşimli öğeye dokunmayı deneyin. Hedeflenen öğeyi etkinleştirmenin zor olduğu veya bitişik öğelerin yanlışlıkla tetiklendiği durumları not edin.
5. Klavye ve ekran okuyucu testi (bağlam için): WCAG 2.5.8 özellikle bir işaretçi ölçütü olsa da, küçük hedeflerin aynı zamanda görünür odak göstergelerine sahip olduğunu ve klavye ile erişilebilir olduğunu doğrulamak bileşik sorunları belirlemeye yardımcı olur. NVDA ile Firefox veya JAWS ile Chrome kullanarak etkileşimli öğelerde gezinin ve boyuttan bağımsız olarak erişilebilir ve etkinleştirilebilir olduklarını doğrulayın.
6. Gerçek cihaz testi: Fiziksel bir mobil cihazda — ideal olarak hem büyük ekranlı bir Android hem de daha küçük bir iOS cihazında — test yapın; böylece masaüstünde geçen hedeflerin, CSS piksel yoğunluğu ve yakınlaştırma davranışının algılanan hedef boyutunu etkileyebileceği mobil viewport boyutlarında da geçtiğinden emin olun.

Nasıl Düzeltilir

Küçük, yalnızca ikon içeren buton — Hatalı

<!-- Close button is only 16x16 CSS pixels, no padding, adjacent to other controls -->
<button class='close-btn' aria-label='Close dialog'>
  <svg width='16' height='16' aria-hidden='true'></svg>
</button>

<style>
  .close-btn {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
</style>

Küçük, yalnızca ikon içeren buton — Doğru

<!-- Adding padding increases the interactive area to 24x24 CSS pixels
     while the visual icon remains 16x16. The min-width/min-height
     ensures the target meets the WCAG 2.5.8 threshold. -->
<button class='close-btn' aria-label='Close dialog'>
  <svg width='16' height='16' aria-hidden='true'></svg>
</button>

<style>
  .close-btn {
    min-width: 24px;
    min-height: 24px;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
</style>

Sıkışık gezinme bağlantıları — Hatalı

<!-- Each link renders at roughly 20px tall with 1px margin,
     leaving insufficient offset spacing between targets -->
<nav aria-label='Main navigation'>
  <ul class='nav-list'>
    <li><a href='/about'>About</a></li>
    <li><a href='/services'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<style>
  .nav-list li { margin: 1px 0; }
  .nav-list a { font-size: 12px; line-height: 1.4; display: block; }
</style>

Sıkışık gezinme bağlantıları — Doğru

<!-- Padding on each anchor ensures the target area is at least 24px tall.
     The gap between items is now large enough to satisfy the offset rule
     even if the text itself is smaller than 24px. -->
<nav aria-label='Main navigation'>
  <ul class='nav-list'>
    <li><a href='/about'>About</a></li>
    <li><a href='/services'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<style>
  .nav-list { list-style: none; padding: 0; margin: 0; }
  .nav-list a {
    display: block;
    padding: 6px 8px; /* vertical padding brings block height to >= 24px */
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
  }
</style>

Çok küçük tıklama alanına sahip onay kutusu — Hatalı

<!-- The default checkbox is visually 13px on many browsers and has no
     associated label providing additional target area -->
<input type='checkbox' id='agree'>
<span>I agree to the terms</span>

İlişkili etiketli onay kutusu — Doğru

<!-- Wrapping the input in a <label> makes the entire label text also
     a valid pointer target. The label's line-height and padding ensure
     the combined hit area easily exceeds 24x24 CSS pixels.
     The input itself is given min-width/min-height as a fallback. -->
<label class='checkbox-label'>
  <input type='checkbox' id='agree' class='checkbox-input'>
  I agree to the terms
</label>

<style>
  .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    min-height: 24px;
  }
  .checkbox-input {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
  }
</style>

Sosyal paylaşım ikon sırası — Hatalı

<!-- Each icon is 18x18px with only 2px gap; the combined
     reachable area for each icon is only 20px, below the 24px threshold -->
<div class='share-row'>
  <a href='#' aria-label='Share on Twitter'>
    <img src='twitter.svg' width='18' height='18' alt=''>
  </a>
  <a href='#' aria-label='Share on Facebook'>
    <img src='facebook.svg' width='18' height='18' alt=''>
  </a>
</div>

<style>
  .share-row { display: flex; gap: 2px; }
  .share-row a { display: inline-block; line-height: 1; }
</style>

Sosyal paylaşım ikon sırası — Doğru

<!-- Each anchor now has min-width and min-height of 24px via padding,
     and the gap between anchors is at least 3px so the offset rule is
     satisfied independently even without the padding. -->
<div class='share-row'>
  <a href='#' class='share-link' aria-label='Share on Twitter'>
    <img src='twitter.svg' width='18' height='18' alt=''>
  </a>
  <a href='#' class='share-link' aria-label='Share on Facebook'>
    <img src='facebook.svg' width='18' height='18' alt=''>
  </a>
</div>

<style>
  .share-row { display: flex; gap: 6px; }
  .share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 3px;
  }
</style>

Yaygın Hatalar

• Buton içindeki ikona width ve height verip, bunları butonun kendisine uygulamamak: Geliştiriciler sıklıkla SVG veya görseli 16–20px ile sınırlar, ancak <button> öğesinin yeterli bir dokunma hedefi oluşturmak için min-width: 24px; min-height: 24px ve uygun padding’e ihtiyaç duyduğunu unuturlar.
• Buton ve input’lardan varsayılan tarayıcı padding’ini padding: 0 veya global reset ile kaldırmak: Form öğelerindeki padding’i sıfırlayan CSS reset’leri, yerel kontrolleri kullanılabilir boyutta tutan tamponu ortadan kaldırır. Reset’ten sonra her zaman açıkça padding ekleyin.
• Yalnızca line-height kullanarak, display: block veya display: inline-block olmadan bağlantı yüksekliğini artırmaya güvenmek: Satır içi öğeler, blok öğelerin yaptığı şekilde height veya dikey padding’e tepki vermez; bu nedenle bir bağlantı görsel olarak daha uzun görünse de, gerçek tıklanabilir sınırlayıcı kutusu küçük kalabilir.
• Bir sarmalayıcıya pointer-events: none uygulayıp tıklama olaylarını küçük iç öğeye bağlamak: Bu, sarmalayıcıya uygulanan padding veya minimum boyutu boşa çıkarır ve etkin hedefi iç öğenin işlenmiş boyutuna indirger.
• Buton kapsayıcısına, butonun padding’ini kırpan overflow: hidden uygulamak: Görsel tıklama alanı kapsayıcının sınırlarına kırpılır ve etkin hedef, butonun kendi boyutlarının ima ettiğinden daha küçük hale gelir.
• scale() gibi CSS transform’larını hesaba katmamak: transform: scale(0.7) ile görsel olarak küçültülen bir buton, çoğu tarayıcıda işaretçi olayları için hâlâ orijinal sınırlayıcı kutusuna sahiptir; ancak bu davranış tutarsız ve güvenilmezdir — hedefleri her zaman nihai işlenmiş ölçeklerinde boyutlandırın.
• Büyük bir <label>’ın, programatik olarak ilişkilendirilmemiş küçük bir <input>’u telafi ettiğini varsaymak: <label>, input’un id değeriyle eşleşen bir for kullanmıyorsa veya input label içinde sarılı değilse, label metnine tıklamak input’u etkinleştirmez; dolayısıyla yalnızca input’un küçük hedef alanı işlevseldir.
• Hedeflerin gerçekte işlendiği viewport boyutlarında test yapmamak: Masaüstünde 32×32 CSS piksel olan bir buton, akışkan ölçekleme veya viewport’a göre birimler (vw, vmin) nedeniyle dar bir mobil viewport’ta 22×22 CSS piksel olarak işlenebilir ve yalnızca mobilde ortaya çıkan bir başarısızlık yaratabilir.
• WCAG 2.5.8’in satır içi metin bağlantıları için getirdiği istisnayı çok geniş yorumlamak: İstisna yalnızca gerçekten bir metin akışı içinde satır içi olan bağlantılar için geçerlidir (örneğin bir paragraf içindeki köprü). Bir formun altında yer alan ve metin gibi stillendirilmiş bağımsız bir bağlantı — örneğin “Şifremi unuttum?” bağlantısı — satır içi bağlantı değildir ve 24×24 eşiğini karşılamalıdır.
• Üçüncü taraf bileşenleri ve gömülü bileşenleri denetlememek: Çerez onay bantları, sohbet bileşenleri ve analitik katmanları, harici script’ler tarafından eklenen küçük butonlar (kabul et, kapat, küçült) içerir. Bunlar hâlâ sayfanın erişilebilirlik duruşunun bir parçasıdır ve kod kurum içinde yazılmamış olsa bile WCAG 2.5.8’e uymalıdır.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, Türkiye’de faaliyet gösteren geniş bir dijital hizmet sağlayıcı yelpazesi için bağlayıcı erişilebilirlik gereklilikleri getirmektedir. Genelge, teknik standart olarak açıkça WCAG 2.2’ye atıfta bulunur ve Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen Erişilebilirlik Logosu’na hak kazanmak için Seviye AA uyumu şarttır. WCAG 2.5.8, WCAG 2.2’de Seviye AA ölçütü olduğundan, doğrudan bu zorunlu çerçevenin kapsamına girer.

Genelge kapsamındaki kuruluş türleri arasında merkezi ve yerel düzeydeki kamu kurumları ve devlet daireleri, bankalar ve finansal hizmet firmaları, hastaneler ve özel sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon işletmecileri, e-ticaret platformları, seyahat acenteleri, özel ulaşım şirketleri ve Milli Eğitim Bakanlığı tarafından yetkilendirilmiş özel okullar (Milli Eğitim Bakanlığı) yer alır. Bu kuruluşların tümü için WCAG 2.5.8 uyumu yalnızca en iyi uygulama önerisi değil — Erişilebilirlik Logosu’nun kullanılabilmesi ve denetimlerde yasal uyumun gösterilebilmesiyle bağlantılı düzenleyici bir yükümlülüktür.

Pratikte bu, bir Türk bankasının mobil uyumlu web uygulamasının, havale onay butonlarının, tek kullanımlık şifre giriş alanlarının ve gezinme kontrollerinin tamamının en az 24×24 CSS piksel hedef boyutunu sağlaması gerektiği anlamına gelir. Benzer şekilde, bir e-ticaret sitesi, sepete ekle butonlarının, adet seçicilerinin ve filtre kontrollerinin tüm cihaz profillerinde yeterli boyutta olduğunu doğrulamalıdır. Sağlık portalları, genellikle küçük tarih hücreleriyle bilinen randevu alma takvimlerini denetlemeli ve bu hücreleri büyütmeli veya yeterli ofset boşluğu sağlamalıdır. Telekom self-servis portalları, veri paketi seçicilerindeki hesap yönetimi bağlantılarının ve toggle kontrollerinin eşiği karşıladığını kontrol etmelidir.

Genelgeye uyulmaması idari yaptırımlarla sonuçlanabilir ve bir kuruluşun, Türk tüketiciler tarafından giderek artan şekilde bir güven göstergesi olarak kullanılan Erişilebilirlik Logosu’nu sergilemesini engelleyebilir. Yaptırımların ötesinde, uyumsuzluk, ilgili denetleyici kurumlara yapılacak şikâyetlere kapı aralar. Türkiye’de yaşlı nüfusun arttığı — Türkiye İstatistik Kurumu, 65 yaş ve üzeri kişilerin 2040 yılına kadar nüfusun %16,3’ünü oluşturacağını öngörmektedir — dikkate alındığında, küçük hedeflerin pratik etkisi zamanla yalnızca artacaktır; bu da erken uyumu hem etik bir öncelik hem de sağlam bir uzun vadeli iş stratejisi haline getirir.