Stepper

Stepper visar var användaren befinner sig i ett numrerat flöde. Den visar även vad som är klart, om något saknas och vilka steg som är kvar att göra för att slutföra flödet.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Expanderbara steg

I komponenten finns möjlighet att välja om stegen ska vara expanderbara eller inte. I design visas det med en chevron till höger.

I flöden där användaren ska kunna växla mellan olika steg i processen själv passar expanderbara steg bra. Om användaren däremot måste komplettera ett steg innan nästa blir tillgängligt bör du designa utan möjligheten att expandera, genom att sätta state på efterföljande steg till disabled.

Tillgänglighet

WCAG-kriteriet 4.1.2 Namn, roll, värde:
För alla komponenter i ett användargränssnitt så ska det kodas med korrekta roller, det ska framgå om komponenten byter status (exempelvis öppen/stängd), samt om det finns värde så ska detta visas tydligt samt kunna presenteras av användarens hjälpmedel (Nivå A)

WCAG-kriteriet 1.3.1 Information och relationer:
Information, struktur, och relationer som förmedlas genom presentation kan bli automatiskt tydliggjord eller finnas som text. Komponenter ska vara kodade enligt HTML-standard så långt som möjligt (exempelvis en rubrik ska vara kodad som en rubrik, en tabell ska vara kodad som en tabell istället för att vara uppbyggd på divar och spans ). Skapa tydliga relationer mellan komponenter som exempelvis labels till inputfällt så användaren kan få korrekt kontext när väl de väl kommer i kontakt med komponenten. (Nivå A)

WCAG-kriteriet 2.4.6 Rubriker och ledtexter/etiketter:
Beskrivande rubriker, ledtexter och etiketter(labels/headings) hjälper användarna att förstå en sidas innehåll och syfte. Rubriker och ledtexter behöver inte vara långa. Ofta kan ett enda ord vara tillräckligt för att beskriva innehållet. Använd nyckelord ur texten och skriv det viktigaste orden först. Vid användning av rubriker så se till att rubrikstrukturen är korrekt och att inga rubriksnivår hoppas (Nivå AA)

WCAG-kriteriet 1.4.3 Kontrast på text mot bakgrund:
Text ska ha tillräckligt hög kontrast på bakgrunden. Liten text ska uppnå minst 4.5:1 i kontrastvärde, och stor text ska uppnå minst 3.0:1.

WCAG-kriteriet 1.4.11 Kontrast på icke-textobjekt:
Det ska vara tillräcklig kontrast mellan bakgrund och komponenter, ikoner, symboler och andra grafiska informationsbärande objekt. Minsta kontrast värdet det ska uppnå är: 3.1. Samt när det gäller text så ska det uppnå 4.5 för liten text och 3.1 för stor text. Detta kravet gäller även fokusmarkeringar.

WCAG-kriteriet 1.3.2 Presentera innehållet i en meningsfull ordning:
Utforma innehållet på ett sätt som bevarar den avsedda betydelsen för alla användare, även om ordningen skulle förändras. (Nivå A)

 WCAG-kriteriet 1.3.4 Innehåll kan presenteras korrekt oavsett skärmens riktning:
Skapa en design så att innehåll och funktioner är tillgängliga oavsett skärmens riktning. Då kan var och en välja det läge de föredrar. (Nivå AA)

WCAG-kriteriet 1.4.12 Se till att det går att öka avstånd mellan tecken, rader, stycken och ord:
Många användare, till exempel dyslektiker och personer med nedsatt syn, behöver kunna påverka avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa. Gör det därför möjligt för användaren att påverka avstånden utan att innehåll eller funktionalitet krockar eller gömmer sig bakom annat innehåll. (Nivå AA)

WCAG-kriteriet 1.4.10 Skapa en flexibel layout som fungerar vid förstoring eller liten skärm:
Skapa en layout som fungerar på en 320 pixlar bred skärm utan att information eller funktionalitet går förlorad, utan scrollning i mer än en riktning.  (Nivå AA)

WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information:  
Låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation. (Nivå A)

WCAG-kriteriet 2.1.1 Tangentbordsnavigering:
Se till att det går att hantera och navigera till/från och inuti komponenten. Alla interaktiva element ska kunna nås med enbart tangentbord.

WCAG-kriteriet 2.4.3 Fokusordning:
Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A) Se till att fokus/tab-ordningen är logisk.

WCAG-kriteriet 1.1.1 Beskriv med text allt innehåll som inte är text:

Alla grafiska objekt som bär på information ska kunna tolkas av användare som inte kan förlita sig på syn. Se till att informationsbärande bilder och ikoner har en förklarande alt-text som ger användaren kontext, annars riskerar användaren att missa information som de seende får ta del av. Om exempelvis en ikon ligger intill en beskrivande label som beskriver ikonens innebörd så behöver man inte beskriva ikonen en extra gång, vid dessa tillfällen så kan man lägga en tom alt-text på ikonen då det blir redundant att beskrivningen nämns två gånger. Samma sak gäller visuella objekt som enbart är dekorativa, ge dom tomma alt-texter.

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.