Modal

Egnet til:

• å be brukeren fokusere på en spesifikk oppgave
• å sikre at brukeren får med seg viktig informasjon
• å vise en kristisk systemfeil der hele tjenesten er nede.

Uegnet til:

• å vise en feilmelding i et skjema
• komplekst og sammensatt innhold
• situasjoner der man må huske detaljer i Modal til senere i flyten. 

Teknisk dokumentasjon

Se Modal i Storybook for tekniske detaljer. 

Varianter

Komponenten har 3 varianter; standard (med ramme), enkel (uten ramme) og viktig. Standard med ramme brukes i de fleste tilfeller. Enkel brukes i spesielle tilfeller hvis rammen tar for mye oppmerksomhet, eller gjør det vanskelig å plassere ønsket innhold på en god måte inni Modal. Viktig-varianten brukes bare unntaksvis når man skal varsle om noe viktig, og samtidig understreke at det er Skatteetaten som er avsender. 

Standard modal:

Hvordan bruke komponenten  

Obligatorisk tittel

Tittel er obligatorisk fordi denne leses opp av skjermleser når Modal åpnes, men det er mulig visuelt skjule den dersom den tar for mye oppmerksomhet.

Lukkekryss og autolukking

Standard oppførsel er at Modal lukkes når brukeren klikker på det nedtonende området utenfor boksen, eller ved å trykke på lukkekryss eller avbryt-knapp i Modal.  Denne typen lukking betyr at Modal skjules uten å gjøre endringer i brukerens data. En modal skal som hovedregel alltid ha lukkekryss hvis ikke brukeren må ta stillling til noe for å komme videre. Hvis du ønsker å tvinge brukeren til å ta stilling det som står i modalen før de kan fortsette kan du skru av autolukking og skjule lukkekrysset.

Samtykkemodal

Når brukeren på ulike måter er på vei bort fra det løsningen tillater, må vi «gjete» dem tilbake og la dem ta stilling til det som gjelder. For eksempel at de kan velge å lagre før de går ut av løsningen. 

Ventevarsel

Dersom brukeren har vært inaktiv i 20 minutter anbefaler vi å vise et varsel hvor brukeren kan bekrefte at hen fremdeles er aktiv. Bruk da illustrasjon og tekst fra eksempelet i Storybook. 

Illustrasjoner

Vi oppfordrer til å bruke illustrasjoner der de gir en verdi, og understøtter oppgaven som skal gjøres. Unngå å bruke illustrasjoner utelukkende som «pynt». Egne bilder bør ha størrelsesforhold omkring 2,35:1 (samme som kinolerret).

Universell utforming  

• Tittelen brukes til å sette kontekst for skjermlesere, og vil alltid leses opp når Modal åpnes.
• Sjekk at modalen får fokus etter at den åpnes. Dette gjør det enklere for en skjermleser å oppdage og lese opp innholdet.
• Test med tastatur at du ikke kan navigere ut av dialogen. Tastaturfokuset skal være på knappen som åpner dialogen etter lukking.
• Sjekk at alt innholdet bak dialogen blir dus.