SSP – Einheitlicher Standard für die Paginierung

Der SSP-Standard legt Anforderungen an die Semantik, Zugänglichkeit und Logik der Seitennavigation fest.

Struktur

Der gesamte Paginierungsblock muss zwingend in den Tag <nav> eingeschlossen werden, um den Navigationsbereich zu kennzeichnen. Die Seitenzahlen müssen in Form einer geordneten Liste <ol> implementiert werden. Die Schaltflächen „Zurück“ und „Weiter“ befinden sich innerhalb von <nav> vor bzw. nach der Liste.

Verhalten und Barrierefreiheit

Die aktive Seite wird immer mit dem Attribut aria-current="page" gekennzeichnet, damit Screenreader korrekt funktionieren. Die Links „Zurück“ und „Weiter“ müssen blockiert und inaktiv werden, wenn die erste und letzte Seite erreicht sind. Die aktuelle Seite muss durch einen kontrastreichen Stil visuell hervorgehoben werden. Bei einer großen Anzahl von Seiten werden Ellipsen verwendet, um die erste, letzte und mittlere Gruppe von Links zu trennen.

Abschließendes Beispiel

<nav class="pagination">
  <a href="#" class="pagination__link disabled">Zurück</a>
  <ol class="pagination__list">
    <li>
      <a href="?page=1" class="pagination__link">1</a>
    </li>
    <li>
      <span class="pagination__ellipsis">...</span>
    </li>
    <li>
      <a href="?page=4" class="pagination__link">4</a>
    </li>
    <li>
      <a href="?page=5" class="pagination__link active" aria-current="page">5</a>
    </li>
    <li>
      <a href="?page=6" class="pagination__link">6</a>
    </li>
    <li>
      <span class="pagination__ellipsis">...</span>
    </li>
    <li>
      <a href="?page=20" class="pagination__link">20</a>
    </li>
  </ol>
  <a href="?page=6" class="pagination__link">Weiter</a>
</nav>