SegmentedControl

Rol ve anlam

SegmentedControl, Base UI RadioGroup ve Radio ile çizilir: kök role="radiogroup", her seçenek aria-checked taşıyan role="radio" öğesidir. Bu, yalnızca basılı düğmeler kullanan grup yaklaşımından ileridir: ekran okuyucu tek seçimli bir grup olduğunu ve kaçıncı seçenekte olunduğunu söyler. label tip düzeyinde zorunludur ve aria-label olur. Dolgu ve ikonlar aria-hidden taşır. name verilince gizli input öğeleri değeri forma taşır.

Klavye

Tuş	Davranış
Tab	Seçili seçeneğe odaklanır; grubun tek sekme durağı vardır.
Sağ ve aşağı ok	Sonraki seçeneğe gider ve seçer; sonda başa döner.
Sol ve yukarı ok	Önceki seçeneğe gider ve seçer.
Space	Odaktaki seçeneği seçer.

Devre dışı seçenekler ok tuşlarıyla atlanır. Sağdan sola dilde yatay okların yönü Provider direction="rtl" ile döner.

Odak

Odaktaki seçenekte 2 px color-focus-ring halkası 2 px aralıkla görünür; yalnızca klavye odağında (focus-visible).

Ekran okuyucu

Örnek	Okunan
Gruba giriş	“Dönem, radyo grubu, Haftalık, radyo düğmesi, seçili, 2 / 3”
Ok tuşuyla geçiş	“Aylık, radyo düğmesi, seçili, 3 / 3”
Devre dışı seçenek	Atlanır; fareyle gelinirse “Yıllık, radyo düğmesi, soluk”

Kontrast

Etiketler zeminlerinde en az 4,5:1 kontrast taşır. Seçim yalnız renkle gösterilmez: seçili seçenek yükseltilmiş dolgu ve gölge alır. Devre dışı etiket eşikten muaftır (WCAG 1.4.3).

WCAG 2.2

Ölçüt	SegmentedControl nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	radiogroup ve radio rolleri.	Seçenekleri birbirini dışlayan değerlerle kurun.
1.4.1 Renk kullanımı	Seçim dolgu ve gölgeyle de gösterilir.	Dolguyu gizlemeyin.
2.1.1 Klavye	Ok tuşları, Space ve tek sekme durağı.	Kendi tuş işleyicinizi eklemeyin.
2.4.7 Görünür odak	focus-visible halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	En küçük seçenek 32 px yüksekliktedir.	Etiketleri boş bırakmayın.
4.1.2 Ad, rol, değer	Grup adı label’dan, durum aria-checked’dan gelir.	Anlamlı bir label verin.