Pagination

Dieses Kochbuchmuster zeigt das Navigationsmuster zur Anzeige von Pagination, bei der der Benutzer zwischen Seiten von Inhalten wie Suchergebnissen wechseln kann.

Links zu Seitengruppen in einer Paginierungsauflistung

Anforderungen

Das Paginierungsmuster zeigt typischerweise Elemente in einer Zeile an. Um sicherzustellen, dass die Paginierung für Personen, die einen Screenreader verwenden, verständlich ist, kennzeichnen wir die Elemente als Liste innerhalb eines <nav>-Elements und verwenden dann CSS, um das Layout visuell als Zeile darzustellen.

Typischerweise wird die Paginierungskomponente horizontal zentriert unter dem Inhalt angezeigt.

Rezept

Dieses Beispiel herunterladen

Getroffene Entscheidungen

Dieses Muster ist mit flexbox gestaltet — ein Flex-Container, der in einem anderen verschachtelt ist. Das <nav>-Element wird als Flex-Container bezeichnet, damit wir die Liste mithilfe der justify-content-Eigenschaft zentrieren können.

Die Liste selbst wird ebenfalls zu einem Flex-Container, um die Elemente als Zeile anzuordnen. Um die Elemente zu verteilen, können wir entweder einen margin auf die Flex-Elemente anwenden oder eine gap auf den Flex-Container hinzufügen.

css
.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}

Zugänglichkeitsaspekte

Wir möchten sicherstellen, dass eine Person, die einen Screenreader verwendet, versteht, was diese Navigation bewirkt und wohin sie gelangt, wenn sie auf einen Link klickt. Um dies zu unterstützen, haben wir aria-label="pagination" auf dem <nav>-Element hinzugefügt.

Wir haben auch zusätzlichen Inhalt hinzugefügt, der von einem Screenreader gelesen wird, aber visuell verborgen ist, und das aria-hidden-Attribut auf die Paginierungspfeile gesetzt.

Der Abschnitt "Siehe auch" am Ende dieses Dokuments enthält Links zu verwandten Barrierefreiheitsthemen.

Siehe auch