...
| Innehållsförteckning |
|---|
...
Exempel
...
| Info |
|---|
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).
...
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 |
| ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Publicerad | 2020-01-18 | ||||||||||||
Senast uppdaterad | 2020-01-20 |
...