Exempel
Denna komponent är inte utvecklad ännu. Design finns i Sketchbiblioteket.
Bild på modal för felmeddelande på desktop.
Bild på modal för felmeddelande på mobil.
Designspecifikation
Modaler används främst för dialoger, men även för felmeddelande där komponenten Tillfälligt meddelande: information och faktaruta - 1177 inte är applicerbar.
Modalen har vit bakgrund med standard hörnradie på 10 px. Tona ner ytan mot bakomliggande sida med 60% opacitet (stone-dark).
På 1177.se används modal endast för felmeddelande när användaren växlar region på en sida och denna sida inte finns för den region man växlat till.
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/
I fallet med felmeddelanden genom modal så behöver vi även ha rätt aria-live attribut anpassat till situationen.
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 |