Paginierung

Dieses Kochbuchmuster demonstriert das Navigationsmuster, das zur Anzeige von Paginierungen verwendet wird, bei dem der Benutzer zwischen Seiten von Inhalten wie Suchergebnissen navigieren kann.

Links zu Seitensätzen in einer Seiteneinteilung

Anforderungen

Das Paginierungsmuster zeigt Elemente typischerweise 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 optisch als Reihe darzustellen.

Normalerweise wird die Paginierungskomponente horizontal unterhalb des Inhalts zentriert.

Rezept

Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:

html
<nav aria-label="pagination">
  <ul class="pagination">
    <li>
      <a href="">
        <span aria-hidden="true">&laquo;</span>
        <span class="visuallyhidden">previous set of pages</span>
      </a>
    </li>
    <li>
      <a href=""><span class="visuallyhidden">page </span>1</a>
    </li>
    <li>
      <a href="" aria-current="page">
        <span class="visuallyhidden">page </span>2
      </a>
    </li>
    <li>
      <a href=""> <span class="visuallyhidden">page </span>3 </a>
    </li>
    <li>
      <a href=""> <span class="visuallyhidden">page </span>4 </a>
    </li>
    <li>
      <a href="">
        <span class="visuallyhidden">next set of pages</span
        ><span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
css
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

nav {
  border-top: 1px solid #eee;
  margin-top: 1em;
  padding-top: 0.5em;
  font: 1.2em sans-serif;

  display: flex;
  justify-content: center;
}

.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.pagination li {
  margin: 0 1px;
}

.pagination a {
  display: block;
  padding: 0.5em 1em;
  border: 1px solid #999;
  border-radius: 0.2em;
  text-decoration: none;
}

.pagination a[aria-current="page"] {
  background-color: #333;
  color: white;
}

Getroffene Entscheidungen

Dieses Muster wird mit Flexbox gestaltet — ein flexibler Container, der in einen anderen eingebettet ist. Das <nav>-Element wird als flexibler Container festgelegt, damit wir die Liste mit der justify-content-Eigenschaft zentrieren können.

Die Liste selbst wird ebenfalls zu einem flexiblen Container, um die Elemente in einer Reihe anzuordnen. Um die Elemente zu verteilen, können wir entweder einen margin auf den flexiblen Elementen verwenden oder einen gap auf den flexiblen Container hinzufügen.

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

Barrierefreiheitsbedenken

Wir möchten sicherstellen, dass eine Person, die einen Screenreader verwendet, versteht, was diese Navigation tut und wohin sie gehen wird, 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 würde, aber visuell versteckt ist, und das Attribut aria-hidden auf den Navigationspfeilen gesetzt.

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

Siehe auch