Bileşenler
Skeleton
Henüz yüklenen içeriğin biçiminde bir yer tutucu.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Skeleton role="status" ve aria-busy="true" taşıyan bir öğe çizer. Biçimler aria-hidden ile gizlidir; görünmeyen etiket durumu söyler. decorative verildiğinde öğenin tamamı gizlenir.
Klavye
Bölüm başlığı “Klavye”Skeleton odak almaz ve klavye etkileşimi yoktur.
Odak almaz. İçerik geldiğinde odağı taşımayın; kullanıcı içerikte kendi sırasıyla ilerlesin.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Varsayılan | “İçerik yükleniyor” |
| Kart yer tutucusu | Kapsayıcıdaki etiket: “Kart yükleniyor” |
decorative |
Hiçbir şey |
Kontrast
Bölüm başlığı “Kontrast”Yer tutucu bilgi taşımaz; kontrast gereği yoktur. Durumu metin etiketi bildirir.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Skeleton nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 2.2.2 Duraklat, durdur, gizle | Vurgu 4,5 saniyede durur. | Yer tutucuyu döngüye almayın. |
| 2.3.3 Etkileşimden kaynaklı animasyon | Azaltılmış harekette vurgu geçmez. | className ile animasyon eklemeyin. |
| 4.1.3 Durum mesajları | role="status" ve yerelleştirilmiş etiket. |
Bir öğe için tek durum rolü kullanın. |