Bileşenler
Stepper
Çok adımlı bir akışta nerede olunduğunu gösteren adımlar ve Geri, İleri düğmeli WizardFooter.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Stepper “İlerleme” adlı bir nav içinde sıralı bir listedir (ol). Geçerli adım aria-current="step" taşır. Her adımın durumu adın arkasına görünmez metinle eklenir: “Bilgiler, tamamlandı”. İşaretler ve çizgiler aria-hidden taşır. 640 px altındaki “Adım 2 / 3: Tercihler” satırı görsel bir kısaltmadır; liste ekran okuyucuya tam okunur.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | onStepChange ile tamamlanmış adım düğmelerine; sonra WizardFooter düğmelerine. |
| Enter, Space | Adıma döner ya da düğmeyi çalıştırır. |
Adım değişince odağı yeni adımın başlığına taşıyın; Stepper odağı kendisi taşımaz.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Liste | “İlerleme, gezinme, liste, 3 öğe” |
| Geçerli adım | “Tercihler, geçerli adım, geçerli adım” |
| Tamamlanan (düğme) | “Bilgiler, tamamlandı, düğme” |
Kontrast
Bölüm başlığı “Kontrast”İşaret kenarları ve çizgi 3:1, adlar 4,5:1 kontrast taşır. Durum yalnızca renkle değil, onay ve uyarı simgesi ve metinle de verilir.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Stepper nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Sıralı liste ve aria-current. |
— |
| 1.4.1 Rengin kullanımı | Durum simge ve metinle de verilir. | — |
| 2.4.8 Konum | “Adım 2 / 3” her zaman görünür. | — |
| 3.3.4 Hata önleme | Geri dönülebilir; özet adımı var. | Son adımda bir özet gösterin. |