Bileşenler
EmptyState
Bir sayfa, panel ya da liste henüz boşken ya da arama sonuç vermediğinde gösterilen açıklama ve sonraki adım.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”EmptyState bir başlık (headingLevel, varsayılan h2), bir paragraf ve eylemlerden oluşur; landmark ya da canlı bölge değildir. İkon ve çizim dekoratiftir ve okunmaz.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Eylemlere gider. |
EmptyState odak almaz. Filtre temizlendiğinde ya da öğe eklendiğinde odağı yönetmek uygulamanın işidir.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Başlık | “Sonuç bulunamadı, başlık düzeyi 2” |
| Eylem | “Filtreleri temizle, düğme” |
Kontrast
Bölüm başlığı “Kontrast”Başlık en az 4.5:1, açıklama color-text-subtle ile en az 4.5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | EmptyState nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Gerçek başlık ve paragraf. | headingLevel’ı sayfa ana hattına uydurun. |
| 1.1.1 Metin dışı içerik | İkon gizli; çizim için alt="" istenir. |
Çizime anlam yüklemeyin. |
| 4.1.3 Durum mesajları | Rol taşımaz. | Aramadan sonra sonuç sayısını ayrıca bildirin. |