Paginierung

Dieses Kochbuchmuster demonstriert das Navigationsmuster zur Darstellung der Paginierung, bei der der Benutzer zwischen Seiten mit Inhalten wie Suchergebnissen wechseln kann.

Links zu Seitensätzen in einer paginierten Liste

Anforderungen

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

In der Regel wird die Paginierungskomponente horizontal zentriert unterhalb des Inhalts platziert.

Rezept

Klicken Sie auf "Abspielen", 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: #fff;
}

Getroffene Entscheidungen

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

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

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

Barrierefreiheit

Wir möchten sicherstellen, dass eine Person, die einen Screenreader verwendet, versteht, was diese Navigation bewirkt und wohin sie gelangen, wenn sie auf einen Link klickt. Zur Unterstützung haben wir aria-label="pagination" auf das <nav>-Element gesetzt.

Wir haben auch einige zusätzliche Inhalte hinzugefügt, die von einem Screenreader gelesen, aber visuell verborgen werden, und das aria-hidden-Attribut auf den Seitennummerierungspfeilen gesetzt.

Im Abschnitt "Siehe auch" am Ende dieses Dokuments finden Sie Links zu verwandten Barrierefreiheitsthemen.

Siehe auch