Checkbox

Rol ve anlam

Checkbox, Base UI Checkbox ile role="checkbox" taşıyan bir öğe ve form için gizli bir <input> çizer. Kutu, onu saran <label> ile adlandırılır. Durum aria-checked ile true, false ya da mixed olarak bildirilir.

Klavye

Tuş	Davranış
Tab	Kutuya odaklanır; devre dışıysa atlar.
Space	Durumu değiştirir.

Odak

Odakta 2 px color-focus-ring halkası kutunun 2 px dışında görünür (focus-visible).

Ekran okuyucu

Örnek	Okunan
İşaretsiz	“Seçenek etiketi, onay kutusu, işaretli değil”
Karışık	“Tümü, onay kutusu, kısmen işaretli”
Açıklamalı	Ad ve durumdan sonra açıklama okunur

Kontrast

İşaretsiz kutunun color-border-strong kenarlığı zeminde en az 3:1 kontrast taşır. Onay işareti dolguda en az 3:1 kontrast taşır.

WCAG 2.2

Ölçüt	Checkbox nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Saran <label> ve aria-describedby.	Her kutuya görünür etiket verin.
1.4.11 Metin dışı kontrast	Kenarlık ve işaret 3:1.	Kenarlığı className ile inceltmeyin.
2.5.8 Hedef boyutu (asgari)	Kutu ile etiket tek tıklama alanıdır.	Etiketi kısa ama boş bırakmayın.
4.1.2 Ad, rol, değer	role="checkbox" ve aria-checked.	Karışık durumu yalnızca üst öğede kullanın.