Paginering: "1", "2", "3"

Link: “1”. Link: “2”. Link: “3”.

Eén, twee, drie wat? Pagina’s? Producten? Stappen?

Paginering met alleen cijfers als linktekst is niet beschrijvend genoeg als er geen context is.

<!-- Niet doen: alleen cijfers -->
<ul>
  <li><a href="?pagina=1">1</a></li>
  <li><a href="?pagina=2">2</a></li>
  <li><a href="?pagina=3">3</a></li>
</ul>

<!-- Wel doen: aria-labels voor context -->
<nav aria-label="Paginering">
  <ul>
    <li><a href="?pagina=1" aria-label="Pagina 1">1</a></li>
    <li><a href="?pagina=2" aria-label="Pagina 2" aria-current="page">2</a></li>
    <li><a href="?pagina=3" aria-label="Pagina 3">3</a></li>
  </ul>
</nav>

Drie verbeteringen tegelijk:

1. aria-label="Pagina 1" maakt het linkdoel duidelijk
2. aria-current="page" geeft aan welke pagina actief is
3. <nav aria-label="Paginering"> vertelt de schermlezer wat dit navigatieblok is

Dit geldt ook voor: carrousel-navigatie met bolletjes, stap-indicatoren bij een formulier, en genummerde tabbladen.