SSP - Einheitlicher Standard für Paginierung

Definitionen

Der SSP-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Paginierung fest.

Struktur und Semantik

Der gesamte Paginierungsblock wird in das <nav>-Tag eingeschlossen, um den Navigationsbereich zu kennzeichnen, die Seitenzahlen müssen als geordnete Liste <ol> dargestellt werden, die Schaltflächen „Zurück“ und „Weiter“ befinden sich innerhalb des <nav>-Tags, und zwar vor bzw. nach der Liste.

Barrierefreiheit

Die aktive Seite wird stets mit dem Attribut aria-current="page" gekennzeichnet, damit Bildschirmleseprogramme korrekt funktionieren, während nicht aktive Schaltflächen die Attribute aria-disabled und tabindex="-1" aufweisen müssen.

Interaktivität und Visuelle Rückmeldung

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__previous disabled" aria-disabled="true" tabindex="-1">Zurück</a>
  <ol class="pagination__list">
    <li class="pagination__item">
      <a href="?page=1" class="pagination__link">1</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__ellipsis">...</span>
    </li>
    <li class="pagination__item">
      <a href="?page=4" class="pagination__link">4</a>
    </li>
    <li class="pagination__item">
      <a href="?page=5" class="pagination__link active" aria-current="page">5</a>
    </li>
    <li class="pagination__item">
      <a href="?page=6" class="pagination__link">6</a>
    </li>
    <li class="pagination__item">
      <span class="pagination__ellipsis">...</span>
    </li>
    <li class="pagination__item">
      <a href="?page=20" class="pagination__link">20</a>
    </li>
  </ol>
  <a href="?page=6" class="pagination__next">Weiter</a>
</nav>