| Innehållsförteckning |
|---|
Exempel
| Iframe | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Designspecifikation
En notis-markör kan användas för att påvisa t.ex. nya meddelanden. Markören är cirkelformad och har som standard vit text på röd bakgrund.
Font: Open Sans, regular
Do’s and Don’ts
Tänk på att placera markören så att den tydligt visar vilket element/text den tillhör.
Tillgänglighet
Tänk på att någon som använder skärmläsare måste förstå komponenten i sitt sammanhang, att bara få en siffra uppläst utan kontext ger inte tillräcklig kontext för användaren med skärmläsare.
Ett exempel kan vara om detta är tänkt att användas som om det är en meddelande-räknare som kan uppdateras dynamiskt ex. så vore det bra att använda sig av role=status och en passande aria-label/labelledby/describedby. Detta så att man som användare kan uppfatta notis-markörens roll på sidan och förstå dess kontext.
Research på komponenten
-
Relaterade resurser/komponenter
Status
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
En notification badge kan användas för att visa användaren när något nytt hänt, t.ex. vid nya meddelanden.
Innehållsförteckning
| Innehållsförteckning |
|---|
Komponentkällor
1177
Inera
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)
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.
Publicerad | |
Senast uppdaterad |