List pagination

Paginering för exempelvis informationstext i en artikelsida för att ta sig till nästa steg. 

Open

1177

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Generella riktlinjer för tillgänglighet

Pagineringen behöver beskrivas med korrekta HTML-taggar, den behöver fungera för större och mindre skärmar. Det behöver finnas kontrast mellan den och bakgrunden, särskilt på den aktuella sidan som användaren är inne på. Fokusordningen ska vara logisk för skärmläsare. Samt att alla knapparna ska kunna vara tillgängliga

WCAG-riktlinjer

WCAG 1.1.1 - Beskriv med text allt innehåll som inte är text (Nivå A) - Se till att allt icke-textinnehåll inom pagineringen, såsom bilder eller ikoner, förmedlas till användare via hjälpmedel och som använder sig av skärmläsare

WCAG 1.3.1 - Förmedla information, struktur och relationer i koden (Nivå A) - Att använda sig av rätt html-taggar kommer användare med hjälpmedel kunna förstå pagineringen på ett bra sätt.

Använd:

WCAG - 1.3.2 Presentera innehållet i en meningsfull ordning (Nivå A) - Innehållet för pagineringen behöver presenteras på ett logiskt sätt. Använd även aria-label för att användaren ska förstå informationen med hjälp av hjälpmedel. När användaren är på t.ex. sida 1 - beskriv då med skärmläsare - "Sida 1 första sidan länk".

WCAG 1.3.4 - Se till att innehållet anpassas efter skärmens storlek (Nivå AA) - Presentera pagineringens information och struktur på samma sätt oavsett skärmens storlek och riktning.

WCAG 1.4.1 Använd inte enbart färg för att förmedla information (Nivå A) - Låt inte enbart färgskillnader vara det enda sättet att urskilja information på pagineringen eftersom skärmläsare inte kan uppfatta visuella förändringar.

WCAG 1.4.3 Använd tillräcklig kontrast mellan text och bakgrund (Nivå A) - Se till att pagineringens siffror har tillräcklig hög kontrast för att vara läsbar för alla användare

WCAG 1.4.4 - Se till att det går att förstora text (Nivå AA) - Se till att pagineringen går att förstora utan att den skymmer eller överlappar annat innehåll

WCAG 1.4.10 - Skapa en flexibel layout som fungerar vid förstoring eller liten skärm (Nivå AA) - Användaren ska kunna ta del av pagineringen på ett korrekt sätt för både mindre och större skärmar samt upp till 200% zoom.

WCAG 1.4.11 - Använd tillräckliga kontraster i komponenter och grafik (Nivå AA) - Använd tillräckliga kontraster i komponenter och grafik. Kontrastvärdet ska uppnå minst 3.0. Vid text gäller 4.5 för liten text och 3.0 för stor text.

WCAG 2.1.1 - All funktionalitet ska kunna användas med tangentbordet (Nivå A) - Användarna ska kunna använda tangentbordet och nå alla element inom pagineringen

WCAG 2.4.3 - Fokusordning (Nivå A) - Viktigt för användare som använder sig av hjälpmedel att fokusordningen är logisk. Se till att man inte hoppar över något element i pagineringen så navigeringen blir lätt för användaren

WCAG 2.4.7 - Gör det synligt vad som är i fokus (Nivå AA) - Se till att det är tydligt vilken del av pagineringen som är i fokus. Fokusmarkeringen behöver visas visuellt på pagineringen så användaren vet vart den är på sidan.

WCAG 2.5.8 Gör länkar, klickbara ytor och menyer användbara för alla (Nivå AA) - De klickbara elementen i pagineringen behöver uppnå minimum kravet som är 24x24 pixlar. Tänk på att inte lägga elementen för nära varandra. 

WCAG 3.2.4 - Benämn funktioner konsekvent (Nivå AA) - Beskriv och namnge samma funktionalitet när användaren byter sidor - då ska hjälpmedel beskriva samma benämningar för användaren. Pagineringen ska även se likadan ut på alla sidor.

WCAG 4.1.2 - Se till att komponenter fungerar med hjälpmedel (Nivå A) - Säkerställ att paginering komponenten kan tolkas med hjälpmedel, genom att ge dom ett namn, roll och värde som kan tolkas. I pagineringen behöver användaren veta vilken sida man är på t.ex.

WCAG 4.1.3 Status meddelanden (Nivå AA) - Informera användare när de navigerar till en ny sida genom att tillhandahålla statusmeddelanden som kan läsas upp av skärmläsare. Exempelvis, visa ett meddelande som "Nu på sida 2" när användaren klickar på knappen för sida 2."

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.