Sidopanel

En sidopanel är en panel som är en kompletterande yta som kan placeras länges en av sidorna antingen till höger eller vänster. Huvudsyftet till den här komponenten är att ge användaren snabb åtkomst till funktioner, inställningar och information utan att störa huvudinnehållet.
Utseendet skiljer sig åt beroende på vilket varumärke webbplatsen tillhör och målgruppen den riktar sig till.

Open

1177

Open

Inera Admin

Innehållsförteckning

Komponentkällor

1177

1177

 

1177

 

Inera

Inera

 

Inera

 

Designspecifikation

Varianter av sidopanelen

Sidopanelskomponenten innehåller flera delar/varianter som gör den anpassningsbar efter vilka behov som finns.

• Den kan vara expanderbar både genom en knapp samt hamburgerikon som då indikerar på att panelen kan döljas och expanderas. Det finns även ett “vanligt” läge där sidopanelen delar utrymmet med innehållet när det är expanderat. Panelen kan både vara på vänster- och högersida.

• Elevated läget: i detta läget trycks komponenten över innehållet vilket betyder att innehållet inte delas på samma sätt.

• Panelen kan innehålla texter, inmatningsfält samt knappar

Tillgänglighet

Tillgänglighet för Sidopanelen

WCAG-kriteriet 1.4.3 Kontrast (minst)

Sidopanelens text måste ha tillräcklig kontrast mot bakgrunden för att användare med en synnedsättning eller färgblindhet lättare ska kunna läsa innehållet. Kontrasten ska vara minst 4.5:1 för vanlig text och 3.0:1 för större text.

WCAG-kriteriet 1.4.10 Anpassning av innehåll

Sidopanelens bredd och placering ska anpassas för att stödja olika skärmstorlekar. Det är viktigt att sidopanelen fungerar både på desktop och mobila enheter. Användare ska kunna zooma upp till 200% på innehållet utan att sidopanelen förlorar funktionalitet.

WCAG-kriteriet 2.1.1 Tangentbordsnavigering

Sidopanelen ska vara fullt navigerbar med tangentbordet. När sidopanelen är aktiv bör den ta emot fokus och fokus ska förbli inom panelens innehåll tills användaren stänger den. De interaktiva element så som knappar och länkar ska kunna fokuseras och aktiveras med tangentbordet.

WCAG-kriteriet 2.1.2 Ingen tangentfälla

Tangentbordsanvändare ska kunna navigera in i och ut ur sidopanelen utan att fastna. Vid en expanderbar meny ska användaren kunna stänga den med hjälp av ESC knappen och fokus ska då hamna på en logisk plats.

WCAG-kriteriet 2.4.6 Rubriker och etiketter

Sidopanelen ska ha en tydlig rubrik eller titel som beskriver dess funktion eller innehåll. Använd tydliga etiketter på knappar, länkar och interaktiva element så användaren förstår syftet med komponenten.

WCAG-kriteriet 3.2.3 Konsistent navigering

Sidopanelen ska fungera på samma sätt på alla sidor där den förekommer. Om den innehåller navigationslänkar eller menyer ska placeringen och beteende i sidopanelen vara konsekvent.

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.