Content navigation

Content navigation används för att lista utvalda länkar till olika kapitel i artikeln som besökaren befinner sig i. Syftet är att skapa en bra översikt av innehållet samt underlätta navigering på långa artikelsidor med flera rubriker.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Varumärkesspecifika riktlinjer

1177
På sidan-navigeringen har blå färgskala och ligger i en blå ram med rundade hörn för att skilja den från lokalnavigeringen.

• Blå rubriker på vit bakgrund, med blå streck mellan.

• Hover och aktiv sida visas med vit pil i blå cirkel till vänster om rubriken.

• Hörnradie 10 px

Inera
På sidan-navigeringen har turkosa rubriker, med grå streck mellan och ligger på en bakgrundsplatta med svag skuggning bakom för att skilja den från lokalnavigeringen.

• Turkosa rubriker på vit bakgrund, med grå streck mellan. Turkos pil till vänster om kapitelrubrikerna.

• Hover och aktiv sida visas med en inverterad, vit pil på turkos cirkel.

• Vit bakgrundsplatta med svag bakgrundsskugga samtä pil riktad mot innehållet på sidan. Hörnradie 3 px.

Desktop

På sidan-navigeringen är sticky och följer med även i långa artiklar. Den placeras under Lokalnavigeringen om sådan finns.

Mobil och tablet

På mobil och tablet fungerar På sidan navigeringen lite annorlunda. Där blir istället kapitlen hopfällda i utgångsläget och H2-rubrikerna klickbara för att fälla ut kapiteltexten.

Då H2-rubrikerna blir klickbara länkar/element är dessa blå. (Jämför med klickbara rubriker i puffar som också är blå. Vanliga, ej klickbara, H2-rubriker på desktop är röda.)

Syftet med att fälla ihop kapitlen i mobil är att skapa god översikt över innehållet samt göra det enkelt att hitta och navigera sig till rätt information.

Tillgänglighet

WCAG-kriteriet 1.3.1 Ange i kod vad sidans olika delar har för roll

Se till att alla komponenter är kodade med korrekta roller. T.ex att en knapp är en knapp, lista är en lista osv så användaren samt eventuella hjälpmedel kan lätt hitta det och identifiera det.  (Nivå A)

WCAG-kriteriet 1.3.4 Se till att allt innehåll presenteras rätt oavsett skärmens riktning

Beroende på läge på skärmen ska innehållet behålla strukturen oavsett liggande/stående, samt att man inte ska behöva använda scrollning i två riktningar. (Nivå AA)

WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information

Kontrast mellan länktext och bakgrund ska vara god (minst 4.5 i kontrastvärde eftersom det handlar om text). Länkar ska dessutom vara understrukna (eller ha någon form av symbol som indikerar att det är en klickbarlänk) för att lätt kunna skiljas ifrån vanlig text. (Nivå A)

WCAG-kriteriet 1.4.3 Använd tillräcklig kontrast mellan text och bakgrund

Denna riktlinje är viktigt för att kunna läsbarheten, särskilt med användare för nedsatt syn. Viktigt att ha bra kontrast (minst 4.5 i kontrastvärde) på text. (Nivå AA)

WCAG-kriteriet 1.4.10 Skapa en flexibel layout som fungerar vid förstoring eller liten skärm

Innehåll på sidan ska behålla logisk struktur trotts inzommat läge eller liten skärm. Innehållet ska vara läsbart och undvika horisontell scrollning ner till 320 pixlars bredd.

Innehåll ska inte överlappa/gå sönder vid 200% förstoring på browser. (Nivå AA)

WCAG-kriteriet 1.4.11 Använd tillräckliga kontraster i komponenter och grafik

Designa komponenter så de har tillräckliga kontraster. Kontrastvärdet ska vara minst 3,0 på alla komponenter och informationsbärande icketext-objekt. (Nivå AA)

WCAG-kriteriet 2.4.3 Gör en logisk tabb-ordning

För användare med tangentbord så är det att det är en logisk tabb-ordning, tabb-ordningen ska följa den visuella strukturen. Oväntat hopp mellan interaktiva element kan göra användaren förvirrad. (Nivå A)

WCAG-kriteriet 2.4.4 Skriv tydliga länkar

Särskilt viktigt att skriva tydliga länkar för användare som tar hjälp av skärmläsare. Ge användaren en chans att förstå vart länken leder någonstans även om den är tagen ur kontext. Det ska vara tydligt för användaren om länken kommer öppna en ny flik, nytt fönster eller lämna sidan. Man kan använda sig av WAI ARIA-teknik för att förknippa text med länk. (Nivå A)

WCAG-kriteriet 2.1.1 Tangentbordsnavigering

Se till att komponenten kan hanteras av användare som enbart navigerar med hjälp av tangentbord. De ska kunna nå och hantera alla interaktiva element samt funktioner. (Nivå A)

WCAG-kriteriet 2.4.7 Markera tydligt vilket fält eller element som är i fokus

Se till att fokusramen som visas när användaren klickar eller tabbar till interaktiva element syns tydligt. Kontrast på fokusramen ska vara minst 3,0 i kontrastvärdet samt tillräckligt bred (minst 1 css pixel enligt nytt krav från wcag 2.2:  2.4.11 Focus Appearance (Minimum) ). (Nivå AA)

WCAG-kriteriet 3.2.3 Var konsekvent i navigation, struktur och utformning

Användaren ska kunna förstå hur webbplatsen fungerar. T.ex menyer, knappar och andra komponenter ska ha samma utseende och beteende på hela webbplatsen om komponenten är återkommande på flera sidor. (Nivå AA)

WCAG-kriteriet 1.4.4 Se till att all text går att förstora – All text på en sida ska gå att förstora upp till 200%. Text och annat innehåll ska inte överlappas eller bli oläsbar vid förstorning.  (Nivå AA)

webbriktlinjer.se/34 Gör länkar, klickbara ytor och menyer användbara för alla

Klickbara ytor ska vara tillräckligt stora så det blir lätt för användaren att navigera till komponenter gäller både dator och mobil.

Detta är samma krav som kommer i WCAG 2.2 (2.5.8 Target Size minimum) – minst 24x24 px storlek

Se till att klickbara länkar/ytor har tillräckligt stor klickyta samt att de inte ligger för tätt inpå andra klickbara element för att minska risken att användaren klickar fel. Inkludera gärna ikoner eller tillhörande text i samma länkelement (<a>) för att få större klickyta. Nytt krav som troligen kommer i WCAG 2.2 så är minimum krav på  klickyta 24 x 24 pxl.  

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.