Modal, dialog - 1177
Exempel
Denna komponent är inte utvecklad ännu. Design finns i Sketchbiblioteket.
Bild modaler för dialog e-tjänster.
Designspecifikation
Modaler används främst för dialoger och har vit bakgrund med standard hörnradie på 10 px. Ytan mot bakomliggande sida är nedtonad med 60% opacitet (stone-dark).
Dialogmodaler används exempelvis för e-tjänster.
Do’s and Don’ts
Använd primär och sekundära knappar för att vikta knappvalen och leda användaren i flödet.
Det ska alltid finnas en möjlighet att stänga modalen, tex via tillbaka-knapp, och gå tillbaka till den vy man var på.
Tillgänglighet
För att göra modaler tillgängliga så är det några saker man behöver se till:
Vi använder rätt role (role=”dialog”).
Se till att det finns en label på komponenten genom aria-labelledby och möjligtvis aria-describedby.
Overlayen av modalen bör vara en “child” av <body>-elementet.
När modalen öppnas sätts fokus på det första fokuserbara elementet i modalen.
När modalen stängs får du fokus där du var innan du gick in i modalen.
Användaren ska inte kunna klicka på saker utanför eller navigera sig ur modalen när den är aktiv.
Användaren ska kunna stänga modalen med ESC-knappen.
Läs mer på: https://bitsofco.de/accessible-modal-dialog/
Research på komponenten
-
Relaterade resurser/komponenter
Status
Status | KOD SAKNAS DESIGN/BESKRIVNING FÄRDIG FÖR TEST / INVÄNTAR GRANSKNING |
|---|---|
Publicerad | 2020-01-18 |
Senast uppdaterad | 2020-01-20 |