Avatar

Rol ve anlam

• Kök role="img" taşır ve aria-label ile adlandırılır. Ad name değeridir; durum varsa parantez içinde eklenir: “Kullanıcı 1 (çevrimiçi)”.
• Ad boşsa ad “Kişi” ya da “Şirket” olur (ui.avatar.person, ui.avatar.company).
• Görselin alt değeri boştur; böylece ad iki kez okunmaz. Baş harfler ve durum noktası role="img" içinde olduğundan ayrıca okunmaz.
• decorative kökü aria-hidden yapar ve rolü ile adı kaldırır. Yalnızca ad avatarın yanında yazılıysa kullanın; durum bu durumda duyurulmaz.
• Avatar.Group adlandırılmış bir grouptur; “+N” sayacı role="img" ve “2 kişi daha” adını taşır.

Klavye

Avatar etkileşimli değildir; sekme sırasına girmez ve klavye tuşlarına yanıt vermez. Avatarı tıklanabilir yapmak için bir bağlantı ya da butonun içine koyun.

Odak

Avatar odak almaz. Bir bağlantının içindeyse odak halkası o bağlantıya aittir.

Ekran okuyucu

Örnek	Okunan
name="Kullanıcı 1"	“Kullanıcı 1, görsel”
name="Kullanıcı 1" status="online"	“Kullanıcı 1 (çevrimiçi), görsel”
name=""	“Kişi, görsel”
decorative	Okunmaz
Grup, max={3}, 5 kişi	“Ekip, grup”; üç ad; “2 kişi daha, görsel”

Baş harfler ve durum noktası ayrıca okunmaz.

Kontrast

Baş harfler durum tonu token’larını kullanır; tüm markalarda ve modlarda en az 4.5:1’dir (değerler bigbang ve fixture çıktısından hesaplandı).

Çift	Açık mod	Koyu mod
color-status-neutral-foreground / color-status-neutral-background	7.81:1	10.22:1
color-status-brand-foreground / color-status-brand-background	7.53:1	9.13:1
color-status-info-foreground / color-status-info-background	8.09:1	7.60:1
color-status-success-foreground / color-status-success-background	6.51:1	8.03:1
color-status-warning-foreground / color-status-warning-background (en düşük)	6.46:1	8.58:1
color-status-danger-foreground / color-status-danger-background	6.79:1	7.19:1
color-status-success-emphasis / color-surface-default (nokta, en düşük)	4.86:1	6.15:1
color-text-default / color-surface-layer-2 (“+N” sayacı)	14.40:1	13.49:1

Durum noktası en az 3:1 olmalı (WCAG 1.4.11); tüm durumlarda 4.86:1 üstündedir. Nokta rengi tek başına bilgi taşımaz: çevrimdışı nokta içi boştur ve durum erişilebilir adda yazılıdır.

WCAG 2.2

Ölçüt	Avatar nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	Kök adı taşır; görselin alt değeri boştur.	Gerçek ve tam ad verin; ad yanında yazılıysa decorative kullanın.
1.3.1 Bilgi ve ilişkiler	Durum, erişilebilir adın parçasıdır; grup group rolündedir.	Gruba aria-label verin.
1.4.1 Renk kullanımı	Çevrimdışı nokta içi boştur; durum adda yazılıdır.	Durum önemliyse yanına metin yazın.
1.4.3 Kontrast (en düşük)	Baş harfler en az 6.46:1.	Yedek renklerini className ile değiştirmeyin.
1.4.11 Metin dışı kontrast	Durum noktası en az 4.86:1.	-
2.5.8 Hedef boyutu	Avatar hedef değildir.	Tıklanabilir yapacaksanız sarmalayan bağlantının 24 px üstünde olmasını sağlayın (en küçük avatar 24 px).