Alert

Eksempler

Varianter

Størrelse

Alert finnes i medium og small, sistnevnte er laget for interne flater (feks saksbehandlingssystemer) som har kompakte brukergrensesnitt og tidvis redusert høydeplass.

Information alert

Brukes som navnet angir til rene informasjonsmeldinger. Den blå fargen og informasjonsikonet gir et udramatisk inntrykk.

Success alert

Opptrer for eksempel i sammenheng med en vellykket brukerhandling.

Warning alert

Advarselen kan spesifisere hva som eventuelt hindrer fremdrift eller skaper problemer. Denne varianten kan ha flere roller avhengig av interaksjonskontekst men hovedformålet er å formidle at status ikke er optimal.

Error alert

Dette varselet gir informasjon om at noe er feil. Hvis mulig kan meldingen også angi løsningsforslag.

Heading

Denne varianten har en innledende heading. Headingen blir en del av sidens overordnet headingsstruktur. Det betyr at du må velge et headingnivå basert på Alert'ens plass i sidens innholdsstruktur.

Inline / plain

Uten farget bakgrunnsfelt eller ramme blir varselet mindre fremtredende og det er kun ikonet som definerer varseltypen rent grafisk.

Tilgjengelighet

Alternativ-tekst

Ikonene er ikke bare dekorative. De har default alternativ-tekst som kommuniserer alvorlighetsgrad: "Informasjon", "Suksess", "Advarsel" og "Feil". Denne blir lest opp som en del av innholdet for skjermleserbrukere.

Interaksjon Skjermleser

Alert-komponenten er ikke en ARIA live region og er ikke relatert til ARIA role="alert". Komponenten skal ikke motta dynamiske oppdateringer. Den blir presentert for skjermleserbrukere som vanlig statisk innhold.

Design

Ikke lag andre versjoner

Regelen for kontinuitet og forutsigbarhet gjelder som alltid, det skal derfor ikke lages andre versjoner av alert komponentet enn de som eksisterer i designsystemet. Eksempelet viser fjernet ramme.

Velg rett variant

Hvis du ønsker å bruke alert uten ramme så velg inline/plain varianten.

Fargekontrast

Lenker i komponenten er svart med underline for å ivareta fargekontrast.

Innhold

Det er ikke alle som har en intuitiv forståelse av betydningen av ikonene og fargene, derfor er det viktig at ordene du velger gjør det åpenbart for brukerne hvordan de skal forholde seg til informasjonen i varselet. Særlig for feilmeldinger er det viktig at du forteller om det er noe de må eller kan gjøre for å komme videre med oppgaven sin.

Semantisk struktur

Alert har ikke noe semantisk struktur som skiller den fra vanlig tekst. Hvis du bruker varianten med heading, sørg for at du setter headingnivået basert på Alert'ens plass i innholdsstrukturen.

Props