Ting å tenke på
Forstyrrende
Modalen legger seg oppå annet innhold og tar all oppmerksomhet
Fokusert
Modalen bør fokusere på én oppgave uten navigering mellom flere trinn
Midlertidig
Brukeren har ikke tilgang til innholdet kontinuerlig
Retningslinjer
En modal brukes der vi trenger å avbryte den nåværende flyten for at brukeren skal gjøre en handling. For mange avbrudd kan være frustrerende. Tenk gjennom om det er mulig å løse oppgaven på en annen måte før du bruker en modal:
- Kan handlingen gjøres som en del av hovedflyten?
- Kan innholdet i en modal heller vises på en egen side?
- Kan du bruke en kontekstuell meny i stedet for en modal?
Innhold
Modalen består av en overskrift, valgfritt innhold, og én eller to knapper.
Innholdet bør være fokusert på én oppgave som kan løses uten mange interaksjoner og steg. Den første knappen er en bekreftende handling, den andre knappen er oftest en avbrytende handling.
Oppførsel
Modalen dimmer innholdet på siden, og legger seg sentrert i skjermen. Den har to mulige roller med hver sin oppførsel:
- Dialog (standard): Modalen kan lukkes ved å klikke på utsiden av dialogen, ved å klikke på kryss i høyre hjørne, eller ved å trykke Esc.
- Alertdialog: Brukeren må ta et valg før de kan gå videre. Modalen kan altså ikke lukkes ved å klikke på utsiden av dialogen eller ved å trykke Esc. Et eksempel på en slik modal er Cookie Consent.
Du kan stort sett bruke standard oppførsel, og anse lukking av modalen som en avbrytende handling.
Tilgjengelighet
Du må gi modalen en tittel for skjermlesere. Denne tittelen kan være ulik den visuelle tittelen, dersom du ønsker det.
Komponenten fanger tastaturfokus frem til den lukkes. Fokuset flyttes så tilbake til der det var før modalen ble åpnet.
