Checkbox Tasarımı: Eleman Seçimi, Tıklama Alanı ve Belirsiz Durum

Onay kutusu arayüzdeki en küçük etkileşim parçalarından biri ve küçük olması işi kolaylaştırmıyor. Hata hep aynı yerlerden çıkıyor: yanlış seçilmiş eleman, parmağın ıskaladığı kutucuk, tersten kurulmuş etiket cümlesi. İç içe yapılar da ayrı bir başlık açıyor, çünkü tarayıcı tarafında checkbox'ın üçüncü bir durumu var ama gönderilen veride yok.

Checkbox mı, radio mu, toggle mu?

Kural basit, ihlali sık. Bir listeden birden fazla seçenek (ya da hiçbiri) işaretlenebiliyorsa checkbox. Tam olarak bir tanesi seçilecekse ve seçenek sayısı azsa radio, uzunsa açılır liste. İki zıt durum arasında geçiş yapılıyorsa toggle.

Toggle'da ayrım biraz daha ince. Toggle dokunulduğu anda sistemin durumunu değiştirir: bildirimi kapattınız, kapandı. Peki aynı toggle'ı altında "Kaydet" butonu olan bir formun içine koyarsanız ne olur? Anahtar açık görünürken ayar henüz yazılmamış olur, yani arayüz kullanıcıya olmamış bir şeyi olmuş gibi gösterir. Formun içindeki ikili seçimler checkbox olmalı, toggle anında uygulanan ayarlara kalmalı.

Yuvarlak kutucuk da benzer bir yanlış sinyal. Kare olmayan bir onay kutusu radio button gibi okunur, kullanıcı tek seçim hakkı olduğunu sanır ve listenin geri kalanına hiç dokunmaz.

Tıklama alanı: 44 piksel rakamı nereden geliyor?

"Dokunma hedefi en az 44 piksel olmalı" cümlesi tek bir kaynağa dayanıyormuş gibi dolaşıyor, oysa ortada birkaç ayrı eşik var. WCAG 2.2'nin AA seviyesindeki Target Size (Minimum) ölçütü 24x24 CSS pikseli şart koşar; 44x44 rakamı AAA seviyesindeki Target Size (Enhanced) ölçütünden gelir. Apple kendi kılavuzunda 44 punto, Android tarafı 48 dp der. Yani 44 zorunlu alt sınır değil, rahat hedef; asıl kaybedeceğiniz eşik 24'ün altıdır.

Kutucuğun kendisini büyütmek çoğu durumda gereksiz. Etiketi input'un etrafına sarın, tıklama alanı metnin tamamı kadar olsun:

<label class="secim"> <input type="checkbox" name="konular[]" value="erisilebilirlik"> Erişilebilirlik yazıları </label>

Etikete biraz dikey padding verdiğinizde satır yüksekliği zaten eşiği aşar. JavaScript'e ya da ayrı bir bileşen kütüphanesine ihtiyaç yok. for özniteliğiyle kurulan bağ da aynı işi görür, sarmalamanın tek avantajı her satır için id üretme derdini ortadan kaldırması.

Etiket cümlesi ve varsayılan durum

Etiket olumlu kurulmalı. "Kampanya e-postası almak istemiyorum" yazan bir kutuyu işaretlemek olumsuzu olumsuzlamaktır; kullanıcı iki saniye durup düşünür, bir kısmı yanlış tarafa basar. "Kampanya e-postalarını almak istiyorum" aynı bilgiyi taşır ve düşünme payı bırakmaz.

Varsayılanı boş bırakmak ise tasarım tercihinden öte. Açık rıza kullanıcının kendi iradesiyle yaptığı olumlu bir eylemi gerektirir, önceden işaretlenmiş kutuda böyle bir eylem yoktur. Avrupa Adalet Divanı'nın Planet49 kararı çerezler özelinde bunu net biçimde söyledi, KVKK'nın açık rıza tanımı da aynı yere çıkıyor. Kutu boş başlar.

Bir de şu var: filtre etiketlerini arama motoru için anahtar kelimeyle doldurmanın sıralamaya katkısı yok. Etiket, kullanıcının o seçeneği tanıması için orada; özelliğin sitedeki adı neyse o yazılır.

Listelerde sıra ve yardımcı butonlar

Seçenekleri dikey dizin, anlamlı bir sıraya koyun (alfabetik, sıklığa göre ya da alanın kendi mantığına göre) ve uzun listeleri alt başlıklarla gruplayın. Yan yana dizilmiş onay kutularında hangi etiketin hangi kutuya ait olduğu belirsizleşir, özellikle etiket uzunlukları birbirini tutmuyorsa.

"Tümünü seç" düğmesi ancak seçeneklerin çoğunun birlikte işaretlendiği listelerde işe yarar; beş maddelik bir filtrede yer kaplamaktan başka bir şey yapmaz. Peki alt ya da üst seçim limiti varsa? Limiti listenin başında yazın, sınıra gelindiğinde kalan kutuları pasifleştirip nedenini gösterin. Kullanıcının bu kuralı form gönderildikten sonra hata mesajıyla öğrenmesi, öğrenebileceği en geç andır.

İç içe kutular ve "belirsiz" durumun sınırı

Ebeveyn kutu, altındaki çocukların hepsi işaretliyse işaretli, hiçbiri değilse boş, bir kısmı işaretliyse belirsiz (indeterminate) görünür. Arayüz tarafı burada bitiyor. Asıl mesele şu: belirsiz durum HTML'de bir öznitelik değil. İşaretlemeye indeterminate="true" diye yazamazsınız, yalnızca DOM üzerinden el.indeterminate = true ile kurulur ve tamamen görseldir. Form gönderildiğinde o kutu ya işaretli ya işaretsiz davranır, üçüncü bir değer sunucuya gitmez.

Bu da ebeveyn kutuyu bir veri alanı değil, bir kontrol hâline getirir. Bir yetki yönetimi ekranında tam bu yüzden ebeveyn kutuyu name özniteliği olmadan bıraktım, sunucuya yalnızca çocuk kutuların değerleri gitti.

Peki üç seviyeli hiyerarşide ne oluyor? İki seviyede ebeveyn-çocuk ilişkisi kutucuklara bakarak takip edilebiliyor, üçüncü seviyede belirsiz işareti bilgi taşımaz oluyor: kullanıcı o kutunun neyi kapsadığını artık çıkaramıyor. O noktada onay kutusu listesi yerine açılıp kapanan bir ağaç bileşeni gerekir ve seçim sayısını metne yazmak gerekir, "12 üzerinden 3 seçili" gibi.