Bileşenler
RadioCard
Başlık, açıklama ve simgeyle büyük bir seçenek; RadioGroup içinde kullanılır, kartın tamamı tıklanır.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Her kartın içinde role="radio" taşıyan bir daire vardır. Radyo yalnızca başlıkla adlandırılır (aria-labelledby); açıklama ve meta aria-describedby ile okunur. Böylece ekran okuyucu kartın bütün metnini ad olarak okumaz. Kartın tamamı bir label olduğu için her yeri tıklanır. Grup RadioGroup ile bir fieldset ve legend taşır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Gruba girer; seçili karta ya da ilk karta. |
| Oklar | Önceki ya da sonraki kartı seçer; devre dışı kartları atlar. |
| Space | Odaktaki kartı seçer. |
Odak radyodadır, ama halka kartın çevresine çizilir (has-focus-visible), böylece hangi kartın odakta olduğu görülür.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Seçili kart | “Günlük özet, radyo düğmesi, seçili, 2 / 3, Her sabah tek bir e-posta. Önerilen” |
| Devre dışı | “Kapalı, radyo düğmesi, soluk” |
Kontrast
Bölüm başlığı “Kontrast”Kenarlıklar zemine karşı 3:1, metinler 4,5:1 kontrast taşır. Seçili kart yalnızca renkle değil, kalın kenarlık ve dolu daireyle de ayrılır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | RadioCard nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Fieldset, legend ve ayrı ad ve açıklama. | — |
| 1.4.1 Rengin kullanımı | Seçim dolu daire ve kalın kenarlıkla da görünür. | — |
| 2.4.7 Görünür odak | Halka kartın çevresinde. | — |
| 2.5.8 Hedef boyutu (asgari) | Kartın tamamı tıklanır. | — |