Paginering

Component om aan te geven dat de beschikbare data opgedeeld is in pagina's. Geschikte weergave bij grote hoeveelheden data. Het paginerings-element verteld de gebruiker dat er meerdere pagina's beschikbaar zijn en op welke pagina de gebruiker zich momenteel bevind.

Aandachtspunten:

  • Voeg op het huidige element het aria-label aria-current toe.

Voorbeelden

Paginering

Visueel voorbeeld:

Html-voorbeeld:

              
<nav class="pagination" aria-label="Paginering">
  <ul>
    <li><a href="#" aria-label="Ga naar pagina 1"aria-current="true">1</a></li>
    <li><a href="#" aria-label="Ga naar pagina 2">2</a></li>
    <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
    <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
    <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
  </ul>
</nav>

Met class pagination en "vorige" en "volgende links.

Html-voorbeeld:

                
<nav class="pagination" aria-label="Paginering">
    <a href="#" aria-label="Ga naar de vorige pagina" class="adjacent previous">Vorige</a>
    <ul>
        <li><a href="#" aria-label="Ga naar pagina 1">1</a></li>
        <li><a href="#" aria-label="Ga naar pagina 2" aria-current="true">2</a></li>
        <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
        <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
        <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
    </ul>
    <a href="#" aria-label="Ga naar de volgende pagina" class="adjacent next">Volgende</a>
</nav>

Uitgeschakelde vorige of volgende link.

Html-voorbeeld:

                
<nav class="pagination" aria-label="Paginering">
  <span aria-label="Ga naar de vorige pagina" class="disabled adjacent previous">Vorige</span>
  <ul>
      <li><a href="#" aria-label="Ga naar pagina 1" aria-current="true">1</a></li>
      <li><a href="#" aria-label="Ga naar pagina 2" >2</a></li>
      <li><a href="#" aria-label="Ga naar pagina 3">3</a></li>
      <li><a href="#" aria-label="Ga naar pagina 4">4</a></li>
      <li><a href="#" aria-label="Ga naar pagina 5">5</a></li>
  </ul>
  <a href="#" aria-label="Ga naar de volgende pagina" class="adjacent next">Volgende</a>
</nav>
Terug naar het hoofdmenu