...
Innehållsförteckning |
---|
...
Exempel
jsfiddle
Grafisk specifikation
Aenean augue urna, dapibus quis ligula eu, auctor tristique nibh. Maecenas eget aliquam magna. Vestibulum condimentum tristique ligula nec consectetur. Proin sed mi at leo aliquet consequat. Donec vestibulum, ligula sit amet consectetur bibendum, diam justo porta justo, ac maximus sem tortor et nulla. Proin quis nunc nec mauris pharetra bibendum ac at nulla. Sed blandit vulputate ullamcorper.
Do’s and Don’ts
Tillgänglighet
Integer ullamcorper sit amet enim quis porttitor. Cras facilisis nibh eu pulvinar vulputate. Aliquam non ex convallis, volutpat urna vitae, fermentum sem. Duis tincidunt at turpis eu hendrerit. Duis finibus metus sit amet diam porta, imperdiet egestas tellus ornare. Nullam egestas ac justo a consectetur.
Research på komponenten
Maecenas dapibus ullamcorper elit sit amet ornare. Aenean eget congue metus, at pharetra dolor. Cras aliquam lectus lacinia nisl vehicula, at faucibus nulla tincidunt.
Relaterade resurser/komponenter
...
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).
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 |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Publicerad | 2020-01-18 | ||||||||||||
Senast uppdaterad | 2020-01-20 |
...