Paginering

Paginering (Pagination) används när det finns ett omfattande innehåll som kan presenteras för användaren men det blir för mycket att visa på en enda lång sida, som till exempel vid ett omfattande sökresultat.

Riktlinjer

  • Paginering placeras på respektive sida under det innehåll som är uppdelat.
  • Det ska tydligt framgå i pagineringen vilken sida av det uppdelade innehållet som användaren befinner sig på.
  • Det ska finnas en numrering i stigande ordning i pagineringen.
  • Det ska tydligt framgå hur man går framåt respektive bakåt i pagineringen med klick på knapp.
  • När det behövs ska användaren, förutom att kunna gå till föregående/nästa sida, även kunna gå till första respektive sista sidan.
  • När användaren befinner sig på första eller sista steget i pagineringen, ska framåt-/ respektive bakåtfunktionen aldrig visas.
  • Användaren ska kunna klicka på en siffra som presenteras i pagineringen för att komma direkt till den sidan.

Bra att tänka på

  • För att ge användaren en känsla av kontroll bör vi presentera hur mycket innehåll det finns totalt sett. Till exempel hur många sökresultat eller annonser som man kan navigera sig igenom med pagineringen.
  • Ett alternativ till paginering kan i vissa fall vara infinite scroll. Men paginering är det bästa alternativ om vi vill ge användaren en känsla av mer kontroll över innehållet de överblickar, och funkar oftast bäst när det finns ett tydligt mål som användaren önskar hitta.

Tillgänglig komponent

  • Eftersom paginering tillhandahåller navigering ska <nav>-elementet ha role="navigation" och innehålla en aria-label="paginering" för att beskriva vilken typ av navigation det handlar om.
  • Användaren ska kunna tabba sig till varje val (länk) i pagineringen och trycka enter för att välja den sidan.
  • Sätt även en aria-label på varje länk som kortfattat beskriver vart länken leder, t.ex. arial-label="3. Gå till sida 3." osv.
  • Länken för den sida som användaren just nu befinner sig på ska ha aria-current="true".
  • Visa endast ett fåtal synliga knappar åt gången. Försök begränsa dig till fem numeriska alternativ.