...
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
...