Bileşenler
ProgressBar
Bir görevin ne kadar ilerlediğini gösteren ya da kalan süre bilinmezken kayan çubuk.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”ProgressBar, Base UI Progress ile role="progressbar" çizer. Ad görünür etiketten gelir (aria-labelledby); hideLabel etiketi yalnızca görsel olarak gizler. Belirli durumda aria-valuenow, aria-valuemin, aria-valuemax ve biçimlenmiş aria-valuetext taşır; belirsiz durumda aria-valuenow yoktur. Görünen yüzde okunmaz, çünkü değer zaten çubuğun parçasıdır. Açıklama aria-describedby ile bağlanır.
Klavye
Bölüm başlığı “Klavye”ProgressBar etkileşimli değildir ve odak almaz.
Odak almaz.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Belirli | “Dosya yükleniyor, ilerleme çubuğu, %40” |
| Özel değer | “Dosyalar aktarılıyor, ilerleme çubuğu, 10 dosyadan 3’ü, Yaklaşık 2 dakika kaldı” |
| Belirsiz | “Hazırlanıyor, ilerleme çubuğu” |
Kontrast
Bölüm başlığı “Kontrast”Dolgu ray üzerinde en az 3:1, etiket en az 4.5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | ProgressBar nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 4.1.2 Ad, rol, değer | Rol, ad ve değer öznitelikleri. | Etiketi her zaman verin. |
| 2.3.3 Etkileşimden kaynaklanan animasyon | Kayma hareketi azaltmada durur. | Yok. |
| 2.2.2 Duraklat, durdur, gizle | Kayma yalnızca yükleme sürerken döner. | Bitince çubuğu kaldırın ya da belirli yapın. |
| 1.4.11 Metin dışı kontrast | Dolgu en az 3:1. | Yok. |