Sidomeny

En sidomeny är en vertikal navigationspanel som placeras på eller vid sidan om huvudinnehållet, till antingen vänster eller höger på skärmen. Den ger användaren snabb åtkomst till olika sektioner eller funktioner genom att visa länkar eller ikoner utan att ta för mycket utrymme.

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Varianter av sidomeny

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

• Med notifikationer och ikoner: Lägger på cirkulära notifikationer på sidan av respektive länktext. Där det stegas upp beroende på hur mycket har uppdaterats sedan senaste aktiva klickning.

• I en sidopanel: Standardvy över sidomenyn, vilket lägger sig på sidan av huvudinnehållet. Då förminskas huvudinnehållets plats och delas med sidomenyn.

• I en förhöjd sidopanel: Ligger på sidan, dvs att det lägger sig över en del av huvudinnehållet.

Tillgänglighet

Tillgänglighet i Sidomeny

En sidomeny är en viktig del av webbplatsens navigation, och det är viktigt att säkerställa att den är användbar för alla användare, inklusive de som använder hjälpmedel.

WCAG-kriteriet 1.4.11: Tillräcklig kontrast

Sidomenyn ska ha tillräcklig kontrast mellan texten och bakgrunden så att användare med nedsatt syn kan läsa innehållet utan problem. Texten på knappar och länkar ska ha en kontrast på minst 4.5:1 för vanlig text och 3.0:1 för större text. (Nivå AA)

Exempel: Se till att sidomenyn har en kontrast som gör texten lätt att läsa på alla enheter och i alla belysningar, genom att använda kontrasterande färger mellan text och bakgrund.

WCAG-kriteriet 1.4.10: Skala av layout och innehåll

Sidomenyn bör kunna skalas och anpassas vid olika skärmstorlekar. Se till att den inte blockerar eller gör annan funktionalitet otillgänglig, även vid zoomning eller användning av små enheter. (Nivå AA)

Exempel: Se till att sidomenyn fungerar även vid skärmzoom eller på små enheter (t.ex. mobiltelefoner) utan att tvinga användaren att scrolla horisontellt eller förlora funktionalitet.

WCAG-kriteriet 2.1.1: Huvudsakliga funktioner via tangentbordw

All funktionalitet, inklusive öppning och navigering av sidomenyn, ska vara tillgänglig via tangentbord. Användare som inte kan använda en mus måste kunna interagera med sidomenyn enbart med hjälp av tangentbordet. (Nivå A)

Exempel: Se till att alla sidomenyknappar eller länkar kan nås och aktiveras med hjälp av tangentbordet, till exempel med tangenterna Tab, Enter och Shift + Tab.

WCAG-kriteriet 2.4.4: Använd och benämn länkar tydligt

Se till att alla länkar i sidomenyn är tydligt namngivna och att deras syfte framgår. Detta är viktigt för att användare ska förstå var länken leder, även utan att se hela sammanhanget. (Nivå A)

Exempel: Använd beskrivande text för alla länkar i sidomenyn, såsom "Kundtjänst" istället för bara "Klicka här".

WCAG-kriteriet 3.2.3: Förutsägbar navigation

När användare navigerar genom sidomenyn (t.ex. via tangentbord eller skärmläsare) ska fokuset röra sig i en logisk och förutsägbar ordning. Se till att fokuset följer ett konsekvent flöde genom alla interaktiva element på sidan. (Nivå AA)

Exempel: Om din sidomeny innehåller länkar eller knappar, säkerställ att tab-ordningen är konsekvent och gör det möjligt för användare att navigera smidigt genom alla menyalternativ.

WCAG-kriteriet 3.3.2: Etiketter eller instruktioner

Om det uppstår ett fel när en användare interagerar med sidomenyn (t.ex. om ett formulär i sidomenyn inte fylls i korrekt), ska användaren få en tydlig och begriplig felmeddelande. (Nivå AA)

Exempel: Om en användare försöker använda ett formulär i sidomenyn och gör ett fel, ge ett tydligt felmeddelande nära det fältet med instruktioner om hur det kan rättas.

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.