Data table pagination

Pagination för datatabeller låter användaren välja hur många rader som ska visas per sida, visar hur många rader tabellen innehåller möjlighet att välja vilken sida som ska visas.

Open

1177

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Generella riktlinjer för tillgänglighet

Komponenten behöver beskrivas med rätt HTML-taggar, knapparna behöver vara tillgängliga, komponenten ska fungera på både större och mindre skärm. Det behöver vara en logisk tabbordning för de som användare skärmläsare samt att det ska finnas kontrast mellan komponenten och bakgrunden.

WCAG-kriterier

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
Genom att använda sig av rätt html-taggar kommer användare med hjälpmedel kunna förstå pagineringen på ett bra sätt.

WCAG 1.3.2 Presentera innehållet i en meningsfull ordning - Nivå A
Användaren ska kunna nå alla element inom paginerings-komponenten och då 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.

WCAG 1.3.4 Se till att innehållet anpassas efter skärmens storlek - Nivå AA
Oavsett skärmens storlek eller riktning så ska informationen och strukturen vara densamma

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 text, ikoner och 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 text går att förstora - Nivå AA
Se till att komponenten 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 procent 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 komponenten

WCAG 2.4.3 Fokusordning - Nivå A
Fokusordningen behöver vara logisk för de användare som använder sig av hjälpmedel. 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
Se till att paginering komponenten kan tolkas med hjälpmedel, t.ex. genom namn, roll och värde.

WCAG 4.1.3 Status meddelanden - Nivå AA
Informera användaren 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.