Alert

Egnet til:

• å fange brukerens oppmerksomhet ved å gi korte viktige meldinger de bør ta hensyn til, for eksempel vise en overordnet systemfeil  eller feil ved innlastning. 
• meldinger som gjelder hele siden eller gruppe/seksjon på siden.
• å vise en systemfeil der deler av tjenesten eller enkeltdata er utilgjengelig.

Uegnet til:

• å gjøre brukeren oppmerksom på feil i enkeltfelt. Da skal du bruke ErrorMessage i stedet.
• vanlig informasjonsinnhold som ikke har karakter av en statusbeskjed, advarsel eller viktig beskjed brukeren må ta hensyn til. Bruk da Panel i stedet.

Teknisk dokumentasjon

Se Alert i Storybook for tekniske detaljer. 

Varianter

Vi har fem varianter; suksess, nøytral, advarsel, feil og fare. Alle variantene har et standard-ikon og mulighet for lukkekryss. Fargene er forhåndsdefinert per variant, og kan ikke endres. Fargene i Alert reflekterer tilnærmet samme betydning som fargene i Panel.

Suksess

Brukes til å bekrefte en vellykket operasjon. Fargen er grønn. 

Nøytral

Viser en nøytral melding som kan være til nytte for brukeren. Fargen er blå. 

Advarsel

Viser en advarsel, eller beskjed om ustabilitet, unntak eller midlertidige feil i løsningen. Fargen er gul. Denne varianten brukes ofte til systemvarsler hvor deler av tjenesten er utilgjengelig.

Feil

Viser en melding om feil som har oppstått. Meldingen skal gi brukeren beskjed om hva som har skjedd, og hva brukeren bør gjøre. Denne varianten brukes ofte til kritiske systemvarsler.

Fare

Viser er spesielt uthevet variant. Denne brukes for eksempel når brukeren kan miste opplysninger, eller for å varsle om strengt fortrolig informasjon. Fargen er rød med uthevet rød kantlinje.

Hvordan bruke komponenten

Farger og ikon for viktighet

Bruk fargekodene med ikoner for aktivt for å understreke graden av alvorlighet i varselet. Skill særlig mellom feil som brukeren kan rette opp der og da, og større feil som for eksempel feil ved innlasting. Se flere eksempler:

På farget bakgrunn

Bruk innstillingen backgroundBrightness hvis du bruker komponenten på en farget bakgrunn for økt kontrast.

Eksempel: Alert på bakgrunn

Statiske og dynamiske varsler

Alert kan brukes både til varsler som er synlige når siden lastes, og til varsler som vises eller endres etter at brukeren har gjort noe.

Du må velge ariaLive ut fra om varselet er statisk eller dynamisk. Ikke la standardverdien stå uten en bevisst vurdering.

Bruk ariaLive="off" når varselet allerede er synlig når siden lastes, eller når varselet er en fast del av innholdet på siden eller i skjemaet. Innholdet er fortsatt tilgjengelig for skjermleserbrukere når de navigerer til varselet, men det blir ikke lest opp automatisk.

Bruk ariaLive="polite" når varselet vises eller endres dynamisk, for eksempel etter at brukeren har gjort et valg, lagret noe eller det har skjedd en endring på siden. Meldingen blir da lest opp av skjermleser på et passende tidspunkt.

Bruk ariaLive="assertive" bare når meldingen er kritisk eller tidssensitiv, og brukeren må få den med seg med en gang. Denne verdien kan avbryte det skjermleseren allerede leser, og skal derfor brukes sjelden.

Hovedregel:
Hvis varselet ligger på siden når siden lastes, bruk ariaLive="off". Hvis varselet dukker opp eller endres etter en handling, vurder ariaLive="polite". Bruk ariaLive="assertive" bare for kritiske meldinger som må annonseres umiddelbart.

Universell utforming  

• Innholdet bør være kort og presist.
• Pass på tilstrekkelig kontrast (minst 4,5:1) mellom tekst og bakgrunn. 
• Husk å bruke riktig type av Alert til riktig type melding og teksten bør gjenspeile alvorlighetsgraden.
• Når du skal vise eller skjule komponenten må du bruke den innebyggede egenskapen (showAlert) – i stedet for å lage egne regler rundt komponenten. Dette gjør det lettere for skjermleser å fange opp endringen.
• Velg ariaLive bevisst. Bruk ariaLive="off" for varsler som allerede er synlige når siden lastes. Bruk ariaLive="polite" eller ariaLive="assertive" bare når varselet vises eller endres dynamisk.