Dialoger
Var försiktig användningen av dialoger då de vid fel tillfällen kan upplevas som störande. Använd dialoger när syftet är att att avbryta användaren och flytta hens fokus.
Modala dialoger är lämpliga för:
- Att varna användaren om att något allvarligt fel är på väg att inträffa.
- När användare behöver ange viktig information för att komma vidare, t.ex. göra ett val som får en omfattande effekt eller ange inloggningsuppgifter för att kunna fortsätta.
- Att dela upp komplicerade flöden i lättare steg.
- Att be om information som väsentligt förenklar det användaren förväntas göra.
Modala dialoger är inte lämpliga för:
- Att visa information som inte är relaterad till det användaren just då håller på med.
- Innehåll som kräver att användaren har tillgång till sådant som finns utanför den modala dialogen – då kan en icke-modal dialog vara att föredra.
Tänk på att
- Modala dialoger avbryter användaren i högre utsträckning än icke-modala dialoger.
- När användaren öppnar en dialog ska fokus flyttas till dialogen.
- Dialogelementet ska ha en beskrivning och vara uppmärkt som en dialog, antingen genom att använda html-elementet dialog eller med role-attributet.
- Det ska gå att stänga dialogen med en stäng-knapp, esc, och genom att klicka utanför dialogen.
- När en dialog stängs ska fokus flyttas tillbaka till den knapp som öppnade dialogen.
- Om en modal dialog är öppen ska innehållet utanför dialogen inte vara tillgängligt. Det ska till exempel inte gå att tabba vidare till övriga delar av sidan. (Men det är lättare sagt än gjort, se exempelvis https://medium.com/@islam.sayed8/trap-focus-inside-a-modal-aa5230326c1b)
- Om en icke-modal dialog är öppen ska det gå att ta sig vidare till övriga delar av sidan.