Gå till slutet av bannern
Gå till början av bannern

Modal - 1177

Hoppa till slutet på meta-data
Gå till början av metadata

Du visar en gammal version av den här sidan. Visa nuvarande version.

Jämför med nuvarande Visa sidhistorik

« Föregående Version 16 Nästa »

Denna komponent är inte utvecklad ännu. Design finns i Sketch samt Figma.

Modaler används för dialoger eller 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).

För 1177 profession används grå rubrik (standardfärg för rubriker).

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 som leder gå tillbaka till den vy man var på. Alternativt via stäng-kryss i övre högra hörnet.

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.

-

-

Status

KOD SAKNAS DESIGN/BESKRIVNING FÄRDIG FÖR TEST / INVÄNTAR GRANSKNING

Publicerad

2020-01-18

Senast uppdaterad

2020-01-20

  • Inga etiketter