Message avatar
Message avatar används i kombination med Card för att visa avsändare i chatt och meddelanden.
Innehållsförteckning
Designspecifikation
Det finns två olika varianter för bakgrundsfärgen på avataren som används för att differentiera avsändarna.
Primary
Accent
Det går att lägga till en subtitle som visa under titeln som komplement.
Tillgänglighet
WCAG-kriteriet 1.1.1 Textalternativ:
Om avataren innehåller informationsbärande grafik eller ikon ska den ha ett lämpligt textalternativ för hjälpmedel. Rent dekorativa avatarer bör döljas för skärmläsare. (Nivå A)
WCAG-kriteriet 1.3.1 Information och relationer:
Relationen mellan avatar, avsändare och tillhörande innehåll ska vara tydligt definierad i strukturen så att hjälpmedel kan tolka komponentens innehåll och sammanhang korrekt. (Nivå A)
WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information:
Om olika avatarfärger används för att särskilja exempelvis avsändartyper ska detta även framgå genom text eller annan visuell indikator, inte enbart genom färg. (Nivå A)
WCAG-kriteriet 1.4.11 Kontrast på icke-textobjekt:
Avatarens ikon och bakgrundsfärg ska ha ett kontrastvärde på minst 3.0:1 om de används för att förmedla information eller status. (Nivå AA)
WCAG-kriteriet 1.4.3 Kontrast på text:
Titel, undertitel och eventuell meddelandetext som visas tillsammans med avataren ska ha tillräcklig kontrast mot bakgrunden. Liten text ska ha minst 4.5:1 i kontrastvärde och stor text minst 3.0:1. (Nivå AA)
WCAG-kriteriet 1.4.4 Förstora utan problem:
Avatar message ska fungera vid 200 % zoom och förstoring av text utan att innehåll överlappar eller försvinner. (Nivå AA)
WCAG-kriteriet 1.4.10 Anpassa efter skärmstorlek:
Avatar message ska kunna användas utan horisontell scroll vid mindre skärmstorlekar eller förstoring upp till 400 %. (Nivå AA)
WCAG-kriteriet 2.4.6 Skriv beskrivande rubriker och etiketter:
Om avatar message innehåller namn, titel eller annan etikett bör dessa vara tydliga och beskrivande för att underlätta förståelsen av vem avsändaren är. (Nivå AA)