Badge

Badge är en färgad markör med text som används för att informera användaren om status på exempelvis ett objekt.

 

Open

1177

 

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Det finns olika varianter av badge som används för att indikera olika typer av status, likt systemet som finns för alert. Likt alert har varianterna ett namn som motsvarar tänkt användningsområde: information, attention, success och error. För både Inera och 1177 finns även primary (default badge), secondary och neutral. Se bilder nedan.

Badge är alltid versalgemen. Det finns en storlek för mobil och en för desktop.

Tillgänglighet

WCAG-kriteriet 1.4.3 Kontrast på text:
Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.4.11 Kontrast på icke-textobjekt:
Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.3.1 Ange i koden vad sidans olika delar har för roll:
Koda komponenter korrekt, exempelvis att en knapp kodas som en knapp så även hjälpmedel lätt kan avgöra vad det är för något när användaren kommer i kontakt med den. Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text. (Nivå A)

WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information:
Använd gärna färg men ha med något mönster, text eller annan indikation för att urskilja exempelvis länkar från brödtext eller olika statusar av en komponent ifrån varandra. Ex: understrykning, text eller symbol. (Nivå A)

WCAG-kriteriet 2.4.6 Skriv beskrivande rubriker och etiketter:
Beskrivande rubriker, ledtexter och etiketter hjälper användarna att förstå en sidas innehåll och syfte. Rubriker och ledtexter behöver inte vara långa. Ofta kan ett enda ord vara tillräckligt för att beskriva innehållet.

WCAG-kriteriet 1.4.4 Förstora utan problem:
Se till att det går att förstora textens dubbla höjd och bredd utan problem. Det ska även gå att zooma in 200% utan att text överlappar eller går sönder.

WCAG-kriteriet 2.1.1 Se till att det går att navigera med tangentbord:
Se till att användaren kan nå alla interaktiva element på sidan med tangentbordsnavigering. (Nivå A)

WCAG-kriteriet 2.4.3 Fokusordning:
Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som är logisk. (Nivå A)

 WCAG-kriteriet 2.4.7 Tydlig fokusmarkering:
Se till att alla interaktiva element som användaren kan tabba till har en tydlig fokusram. Den ska vara minst 3:1 i kontrastvärde. (Nivå AA)

• Riktlinje 34 Gör länkar, klickbara ytor och menyer användbara för alla | Digg (Om badge är klickbar) Se till att klickbara ytor inte ligger för tätt inpå varandra. Om en länk har en tillhörande ikon så gör även denna klickbar för att utöka den klickbara ytan. Det går att förstora den klickbara ytan genom att inkludera ett område runt det som är klickbart. I WCAG 2.2 så kommer ett krav på att klickbara ytor ska vara minimum 24×24 CSS-pixlars storlek, detta är inte officiellt satt ännu då WCAG2.2 är ett utkast fortfarande men kan vara bra att ha i åtanke.

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.