Sidjämförelse

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

Komponentkällor

1177

Inera

Designspecifikation

En notification badge kan användas för att visa användaren när något nytt hänt, t.ex. vid nya meddelanden. Notification badge är rund, men vid högre nummer än 99 övergår formen till att bli en rektangel med rundade hörn.

En notis kan användas i kombination med andra komponenter för att visa på t.ex. nya meddelanden. Exempel på detta kan vara i tabs:

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)

Rekommendationer för att ha en bra

tillgänglighetsanpassad Notification badge:

Vid utformning och implementation av Notification badge är det viktigt att överväga tillgänglighetsaspekter för att säkerställa en användarvänlig upplevelse för alla användare. Följande rekommendationer bör beaktas:

• Användning av ARIA live-tags: För att underlätta för användare med nedsatt syn eller som använder skärmläsare är det rekommenderat att använda ARIA live-tags för att meddela när nya notifikationer uppdateras. Genom att använda “ARIA-live” taggar kan användare få talad feedback om när nya meddelanden kommer in och hur många notifikationer som finns.
  

• Korrekt uppläsning vid sidbelastning: För användare som är beroende av skärmläsare och andra hjälpmedel är det viktigt att säkerställa att notifikationer som endast uppdateras vid sidbelastning läses upp korrekt tillsammans med den tillhörande notification badgen.

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.