StatCard

Rol ve anlam

• Etiketi olan StatCard, aria-labelledby ile etiketine bağlı bir role="group" öğesidir; ekran okuyucu “Toplam öğe, grup” der.
• Etiket, değer, değişim ve dönem DOM’da bu sırayla durur; tek bir cümle gibi okunur. İkinci bir gizli cümle ya da yinelenen metin yoktur.
• Değişimin yönü yalnızca renkle verilmez: ok simgesi görseldir (aria-hidden), yön bir kelimeyle okunur (“artış”, “azalış”, “değişim yok”).
• Yüklenirken kök aria-busy="true" olur ve değerin yerinde gizli “Yükleniyor” metni vardır.
• Değer yoksa — görsel, gerekçe (“bilgi yok”) okunur. Gizli modda •••• görsel, “Gizlendi” okunur.
• StatCard.Trend içeriği role="img" ya da aria-label taşımıyorsa süs sayılır ve aria-hidden olur.

Klavye

StatCard durağandır ve odak almaz. Sekme sırasına yalnızca info ya da trend içine koyduğunuz etkileşimli öğeler girer.

Odak

StatCard’ın kendi odak halkası yoktur. İçine koyduğunuz denetimler kendi halkalarını taşır; kutunun overflow değeri halkayı kesmez.

Ekran okuyucu

Örnek	Okunan
Artış	“Toplam öğe, grup”, “Toplam öğe”, “1.280”, “artış 8 %”, “geçen aya göre”
Azalış, olumlu	“azalış 5 %”; anlam rengi okunmaz, yön kelimeyle verilir
Yükleniyor	“Toplam öğe, grup”, “Yükleniyor”; kök meşgul
Veri yok	“Etkin kullanıcı”, “bilgi yok”
Gizli	“Tamamlanma oranı”, “Gizlendi”
Süs eğilimi	Okunmaz

Kelimeleri delta.label, loadingLabel, hiddenLabel ve noDataLabel ile değiştirebilirsiniz; varsayılanlar kütüphane metinleridir.

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang ve fixture token çıktısından hesaplandı.

Çift	Açık mod	Koyu mod
color-text-default / color-surface-raised	16.71:1	15.44:1
color-text-subtle / color-surface-raised	9.07:1	9.23:1
color-data-positive / color-surface-raised	7.11:1	9.07:1
color-data-negative / color-surface-raised	7.48:1	7.94:1
color-data-positive / color-surface-layer-1 (filled)	6.57:1	9.07:1
color-data-negative / color-surface-layer-1 (filled)	6.91:1	7.94:1

WCAG 2.2

Ölçüt	StatCard nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	Ok ve eğilim süstür (aria-hidden); yön kelimeyle verilir.	Anlamlı bir eğilim için role="img" ve aria-label verin.
1.3.1 Bilgi ve ilişkiler	Grup etiketiyle adlandırılır; parçalar okuma sırasında durur.	Parçalarla özel yerleşim yaparken StatCard.Label kullanın.
1.4.1 Renk kullanımı	Yön ok ve kelimeyle de verilir.	sentiment ile yön çelişiyorsa dönemi açık yazın.
1.4.3 Kontrast	Metin ve veri renkleri en az 6.57:1.	Özel renk vermeyin.
4.1.3 Durum iletileri	Yüklenirken aria-busy ve gizli metin.	Yükleme bitince değerin değiştiğini sayfa düzeyinde duyurmanız gerekiyorsa bir canlı bölge kullanın.