Paginierung
Dieses Cookbook-Muster demonstriert das Navigationsmuster, das zur Anzeige von Seitennummerierungen verwendet wird, bei dem der Benutzer zwischen Seiten mit Inhalten wie Suchergebnissen navigieren kann.
Anforderungen
Das Paginierungs-Muster zeigt normalerweise Elemente in einer Reihe 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 Reihe darzustellen.
In der Regel 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:
<nav aria-label="pagination">
<ul class="pagination">
<li>
<a href="">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
</ul>
</nav>
.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 #eeeeee;
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 #999999;
border-radius: 0.2em;
text-decoration: none;
}
.pagination a[aria-current="page"] {
background-color: #333333;
color: white;
}
Getroffene Entscheidungen
Dieses Muster wird mithilfe von Flexbox erstellt – ein Flex-Container, der in einem anderen geschachtelt ist. Das <nav>-Element wird als Flex-Container festgelegt, 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 Reihe darzustellen. Um die Elemente zu verteilen, können wir entweder einen margin auf die Flex-Elemente anwenden oder einen gap auf den Flex-Container hinzufügen.
.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 bewirkt und wohin sie gelangt, wenn sie auf einen Link klickt. Dazu haben wir aria-label="pagination" auf dem <nav>-Element hinzugefügt.
Wir haben auch einige zusätzliche Inhalte hinzugefügt, die von einem Screenreader gelesen werden, aber visuell verborgen sind, und das aria-hidden-Attribut auf den Pagination-Pfeilen gesetzt.
Der Abschnitt "Siehe auch" am Ende dieses Dokuments enthält Links zu verwandten Themen der Barrierefreiheit.
Siehe auch
justify-content,gap- Know your ARIA: 'hidden' vs 'none' (2018)
- Invisible content just for screen reader users über WebAIM.org (2020)
- Writing CSS with accessibility in mind (2017)
- a11y style guide: pagination