Modal

En modal används för att informera användaren om något och kan innehålla viktig information, kräva att ett beslut tas eller kräva att användaren utför vissa uppgifter (t ex fyller i ett formulär, gör ett val i en radiogrupp eller godkänner villkor).

 

Open

1177

 

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

En modal eller dialogruta är en komponent som dyker upp som ett lager ovanpå tjänsten/webbplatsen. Modaler låser allt innehåll bakom den, så att användaren måste interagera med innehållet innan hen kan stänga rutan. Använd därför dessa sparsamt och endast när det är nödvändigt att informationen visas på detta sätt.

Varumärkesspecifika riktlinjer

• För 1177 används vit bakgrund och hörnradie på 10 px samt en drop shadow. Bakomliggande sida tonas med 60% opacitet (stone-dark).

  • Rubrikfärg är röd för 1177 riktat mot invånare och grå för 1177 riktat mot profession (standardfärger för rubriker).

• För Inera används vit bakgrund med standard hörnradie på 3 px. Tona ner ytan mot bakomliggande sida med 60% opacitet (#000000).

Olika typer av modaler

Det finns olika typer av modaler som passar att använda i olika situationer.

Dialog
Används för att förmedla information. Går att stänga med kryss i övre högra hörnet.

Info
Används för att förmedla information, där användaren behöver trycka på knapp (exempelvis “Fortsätt”) för att stänga modalen.

Confirm
Används för att ge användaren information där hen kan göra två val (exempelvis “Avbryt” eller “Fortsätt”) för att stänga modalen.

Rubrik

Modalernas rubriker använder Heading 1 Small, men får vid behov ändras till annan storlek om det passar kontexten bättre.

Tänk på

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

• Om modalen kräver att användaren gör ett val, använd primära och sekundära knappar för att vikta knappvalen och leda användaren i flödet.

Tillgänglighet

Allmänt för dialog
När en dialog-komponent används så till då att innehållet som är interaktivt i dialogfönstret är det enda som man kan tabba till. Det ska inte gå att tabba utanför en aktiv dialogruta. När ni väljer innehåll för dialogen så då till att användaren behåller fokus inom dialogen tills de aktivt väljer att stänga den.

WCAG-kriteriet 1.4.3 Kontrast på text
Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.4.11 Kontrast på icke-textobjekt
Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.3.4 Innehåll presenteras korrekt oavsett skärmens riktning
Se till att innehållet visas korrekt oavsett om användaren använder sig utav en enhet som enbart kan vara i liggande eller stående läge. (Nivå AA)

WCAG-kriteriet 1.3.1 Ange i koden vad sidans olika delar har för roll
Koda komponenter korrekt, exempelvis att en knapp kodas som en knapp så även hjälpmedel lätt kan avgöra vad det är för något när användaren kommer i kontakt med den. Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text. (Nivå A)

WCAG-kriteriet 1.4.4 Se till att det går att förstora utan problem
Det ska gå att zooma in mer än 200% utan att text överlappar eller att innehållet blir trasigt. Det ska även gå att förstora texten (dubbelt så stort) utan att innehållet blir trasigt eller överlappande. (Nivå AA)

WCAG-kriteriet 1.4.10 Skapa flexibel layout som fungerar vid förstorning eller liten skärm
Undvik horisontell scrollning ner till 320 pixlars bredd. Använd i första hand responsiv design men gör annars en anpassad mobilversion om responsiv design är inte är möjligt. (Nivå AA)

WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information
Använd gärna färg men ha med något mönster eller annan indikation för att urskilja länkar från brödtext. Ex: understrykning eller symbol. OBS! Om det är en länk som går till en extern sida så ska det finnas en symbol som indikerar detta samt att det finns med i beskrivningen för skärmläsare. (Nivå A)

Riktlinje 34 https://webbriktlinjer.se/riktlinjer/34-gor-lankar-och-klickbara-ytor-enkla-att-anvanda-for-alla/
Se till att klickbara ytor inte ligger för tätt inpå varandra. Om en länk har en tillhörande ikon så gör även denna klickbar. Förstora den klickbara ytan genom att inkludera ett område runt det som är länkat. I WCAG 2.2 så kommer ett krav på att klickbara ytor ska vara minimum 24×24 CSS-pixlars storlek, detta är inte officiellt satt ännu då WCAG2.2 är ett utkast fortfarande men kan vara bra att ha i åtanke.

WCAG-kriteriet 2.1.1 Se till att det går att navigera med tangentbord
Se till att användaren kan nå alla interaktiva element på sidan med tangentbordsnavigering. Användaren ska inte heller kunna fastna inuti modulen och inte kunna ta sig ut. Användaren ska inte heller kunna navigera till innehållet bakom modulen så länge modulen är aktiv/visas, för att ta sig ur modulen så ska de aktivt välja att stänga den. (Nivå A)

WCAG-kriteriet 4.1.3 Statusmeddelanden

• Se till att användare med hjälpmedel som exempelvis skärmläsare och förstoringsprogram kan uppmärksammas när viktiga meddelanden dyker upp, även om de presenteras utanför det område på sidan som användaren har i fokus.

• Ange med hjälp av attributen role eller aria-live var viktiga meddelanden kan förekomma, så får hjälpmedel kännedom om dessa och kan presentera dem för användaren vid ett lämpligt tillfälle. (Nivå AA)
  
  

WCAG-kriteriet 2.4.3 Logisk tab-ordning
Se till att tab-ordningen är logisk genom hela sidan. Detta gäller även i dialogrutor, bara det interaktiva elementen i dialogrutan ska vara fokusbara när dialogrutan är uppe. När den stängs så ska man få fokus på nästkommande element på sidan. (A)

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.