Hedef Boyutu (Asgari)

Kısaca

Küçük kontrollere isabet ettirmek zordur. Titremesi, iri parmakları, sınırlı el becerisi ya da az görmesi olanlar ve otobüste telefon kullanan herkes yanlış şeye dokunur ya da hiç isabet ettiremez. Hedefler birbirine yakın olduğunda hatalar katlanır.

WCAG 2.2 ile gelen bu kriter, işaretçi girdisi için hedef boyutunun en az 24 x 24 CSS pikseli olmasını ister; yeterli boşluk, eşdeğer bir kontrol, metin içi hedef, tarayıcının kontrol ettiği boyut ya da zorunluluk durumları hariç.

Neleri kapsar?

• Kural: Her işaretçi hedefi en az 24 x 24 CSS pikselidir. CSS pikselleri tarayıcı yakınlaştırmasıyla değişmez.
• Boşluk istisnası: Her hedefin ortasına yerleştirilen 24 CSS piksel çaplı bir daire başka bir hedefle ya da başka bir küçük hedefin dairesiyle çakışmıyorsa, 24 pikselden küçük hedeflere izin verilir.
• Eşdeğer: Aynı işlev, aynı sayfada boyut gereksinimini karşılayan farklı bir kontrolle de sunuluyor.
• Metin içi: Bir cümlenin ya da metin bloğunun içindeki ya da boyutu hedef olmayan metnin satır yüksekliğiyle sınırlanan bir hedef kapsam dışıdır. Paragraftaki bağlantılar başlıca örnektir.
• Kullanıcı aracısı kontrolü: Boyutu tarayıcı tarafından kontrol edilen ve yazar tarafından değiştirilmeyen hedef; varsayılan biçimli yerel bir onay kutusu gibi.
• Zorunlu: Belirli bir sunum bilgi için zorunludur ya da yasal olarak gereklidir.
• Hedef sayılan: İşaretçi girdisini kabul eden alan; kontrolün parçası olan iç boşluk dahil. Kaydırıcı ya da metin alanı tek hedeftir.
• Kapsam dışı: Gelişmiş AAA seviyesi hedef boyutu (2.5.5) daha fazlasını ister. Sürükleme 2.5.7'dir. Satır aralığı 1.4.12'dir.

Kimleri etkiler?

Titremesi, sınırlı el becerisi ya da hareket engeli olan kişiler. İri parmaklılar ve hareket halindeyken dokunmatik ekran kullananlar. Küçük hedefleri net göremeyen az görenler. Sınırlı hassasiyetle fare, iz topu, baş işaretçisi ya da göz izleme sistemi kullananlar.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. İsabet ettirmesi kolay hedefler, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.5.8'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriter yeni olduğu için dokümanlar ve yazılım için geçerli satırları V4.1.1'in 10. ve 11. maddelerinde kontrol edin. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: 2.5.8 kriteri WCAG 2.2'ye yenidir; bu yüzden WCAG 2.1'i esas alan EN 301 549 V3.2.1'in parçası değildir. EAA için hazırlanan ilk sürüm olan EN 301 549 V4.1.1'de (Eylül 2026) yer alır. V4.1.1 henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında uygunluk karinesi sağlayacaktır. AA düzeyinde bir kriterdir.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Çok küçük bir simge düğmesi

Kontrole ya da etrafındaki bir kapsayıcıya 24 CSS piksellik min-width ve min-height verin (C42).

.icon-btn { width: 16px; height: 16px; padding: 0; }

.icon-btn { min-width: 24px; min-height: 24px; padding: 4px; }
/* Birincil eylemler için 44 x 44 daha rahattır */

2. İyi aralıklı küçük hedefler

24 pikselden küçük hedef, ortasındaki 24 piksellik daire başka bir hedefe ya da daireye değmiyorsa geçebilir.

.chip { width: 18px; height: 18px; margin: 0; } /* komşulara değiyor */

.chip { width: 18px; height: 18px; margin: 3px; } /* 24 px daireler çakışmıyor */

3. Sıkışık simgeler

Aralarında boşluk olmayan küçük simgelerden oluşan bir sıra hem boyutta hem boşlukta kalır.

.toolbar button { width: 20px; height: 20px; margin: 0; }

.toolbar button { min-width: 32px; min-height: 32px; margin: 0 2px; }

4. Onay kutuları ve radyo düğmeleri

Varsayılan biçimli yerel kontrolü tarayıcı kontrol eder. Özel, daha küçük olanın kendi boyutuna ihtiyacı vardır ve tıklanabilir bir etiket yardımcı olur.

.box { width: 14px; height: 14px; }

.box { width: 24px; height: 24px; }
<label><input type="checkbox"> Güncellemelere abone ol</label>

5. Metindeki bağlantılar kapsam dışı, listelerdekiler değil

Bir cümle içindeki bağlantı kapsam dışıdır. Alt bilgi menüsü gibi bağlantı listesi metin içi değildir, bu yüzden her bağlantı asgari boyuta ya da boşluğa ihtiyaç duyar.

.footer a { display: inline; line-height: 1; }

.footer a { display: inline-block; min-height: 24px; padding-block: 4px; }

6. Eşdeğer daha büyük kontrol

Küçük bir kontrolün aynı sayfada yeterince büyük bir eşdeğeri varsa, küçük kalabilir.

<a class="tiny" href="/x">×</a>

<a class="tiny" href="/x">×</a>
<!-- Aynı eylem bu sayfada tam boyutlu bir "Kaldır" düğmesiyle de sunuluyor -->

Mobil için kod örnekleri

WCAG 2.2 asgari 24 x 24 CSS pikseli belirler. Platform yönergeleri daha fazlasını ister: iOS'ta yaklaşık 44 x 44 punto, Android'de 48 x 48 dp. Birincil eylemlerde büyük boyutu hedefleyin.

iOS (SwiftUI)

import SwiftUI

struct CloseButton: View {
    var body: some View {
        Button { dismiss() } label: {
            Image(systemName: "xmark")
                // Simge küçük kalabilir, dokunulabilir alan kalmamalı
                .font(.system(size: 14))
                .frame(minWidth: 44, minHeight: 44)
                .contentShape(Rectangle())
        }
        .accessibilityLabel("Kapat")
    }
}

Android (Jetpack Compose)

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable

@Composable
fun CloseButton(onClose: () -> Unit) {
    // IconButton, küçük simgenin etrafında 48 dp dokunma hedefini korur
    IconButton(onClick = onClose) {
        Icon(Icons.Filled.Close, contentDescription = "Kapat")
    }
}

Nasıl test edilir?

• Hedefleri ölçün: Düğmelerin, simgelerin, onay kutularının, sekmelerin, sayfalamanın ve kapat kontrollerinin tıklanabilir alanını incelemek için tarayıcı geliştirici araçlarını kullanın. En az 24 x 24 CSS pikseli mi?
• Boşluk testini uygulayın: Daha küçük hedefler için her birinin ortasında 24 piksellik bir daire düşünün. Komşu hedefe ya da dairesine değiyor mu?
• İstisnaları bulun: Küçük hedef metin içinde mi, tarayıcı tarafından mı kontrol ediliyor, daha büyük bir kontrolün eşdeğeri mi ya da zorunlu mu?
• Yoğun alanları kontrol edin: Araç çubukları, tablolar, takvimler, sayfalama, etiket listeleri ve alt bilgiler hedeflerin en sık çok küçük olduğu yerlerdir.
• Farklı boyutlarda kontrol edin: Telefonda ve dar genişlikte test edin. Küçülen düzenler hedefleri küçültebilir.
• Mobili kontrol edin: Dokunma hedeflerini ölçmek için platformun erişilebilirlik denetçisini kullanın.
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar boyut ve boşlukları ölçebilir, ama istisnalara bir kişinin karar vermesi gerekir.

Sık yapılan hatalar

• İç boşluğu olmayan simge düğmeleri: 16 piksellik simge aynı zamanda 16 piksellik hedeftir.
• Sıkı yerleştirilmiş kontroller: Aralarında boşluk olmayan küçük hedefler.
• Küçük kapat ve reddet düğmeleri: Çoğu zaman 12 ya da 16 piksel.
• Tıklanabilir etiketi olmayan minik onay kutuları ve radyolar: Etiketi hedefin parçası yapın.
• Sıkı satır yüksekliğiyle bağlantı listeleri: Metin içi değildir.
• Özel kontroller için tarayıcı istisnasına güvenmek: Yalnızca değiştirilmemiş yerel kontroller için geçerlidir.
• Mobil düzenlerde hedefleri küçültmek: Mobil, hedeflerin en çok önemli olduğu yerdir.
• 24 pikseli hedef saymak: Bu asgaridir. Önemli kontrollerde 44 pikseli hedefleyin.

Kaynaklar

• Understanding SC 2.5.8: Target Size (Minimum) (W3C), İngilizce, yeni sekmede açılır
• C42: Using min-height and min-width on target container to ensure sufficient target spacing (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.