Retningslinjer
En modal brukes der vi trenger å avbryte den nåværende flyten for at brukeren skal gjøre en handling. Den legger seg over annet innhold og tar all oppmerksomhet. Brukeren har heller ikke tilgang til innholdet kontinuerlig. For mange avbrudd kan være frustrerende, tenk derfor 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 som regel 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 oppå annet innhold. Du kan velge om modalen skal legge seg sentrert, nederst, til venstre eller til høyre 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.
