Bileşenler
Spinner
Bir şey yüklenirken dönen açık yay; durumu ekran okuyucuya da bildirir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Spinner role="status" taşıyan bir öğe çizer; görünmeyen etiket bu bölgenin içeriğidir. Yay aria-hidden ile gizlidir. decorative verildiğinde öğenin tamamı gizlenir.
Klavye
Bölüm başlığı “Klavye”Spinner odak almaz ve klavye etkileşimi yoktur.
Odak almaz. Yükleme sürerken odağı Spinner’a taşımayın; odak işlemi başlatan denetimde kalsın.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Varsayılan | “Yükleniyor”, kibar duyuru olarak |
label="Kaydediliyor" |
“Kaydediliyor” |
decorative |
Hiçbir şey |
Kontrast
Bölüm başlığı “Kontrast”Yay rengi zeminde en az 3:1 kontrast taşır. subtle tonu yalnızca metnin yanında kullanın.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Spinner nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.4.11 Metin dışı kontrast | Yay 3:1. | Yayı düşük kontrastlı zeminde kullanmayın. |
| 2.3.3 Etkileşimden kaynaklı animasyon | Azaltılmış harekette dönüş durur. | Dönüşü başka bir animasyonla değiştirmeyin. |
| 4.1.3 Durum mesajları | role="status" ve yerelleştirilmiş etiket. |
Neyin yüklendiğini label ile söyleyin. |