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 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.

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>

Der Artikel wird ergänzt werden