Seitennummerierung
Dieses Kochbuchmuster demonstriert das Navigationsmuster, das verwendet wird, um eine Seitennummerierung anzuzeigen, bei der der Benutzer zwischen Seiten von Inhalten wie Suchergebnissen wechseln kann.
Anforderungen
Das Seitennummerierungsmuster zeigt typischerweise Elemente in einer Reihe an. Um sicherzustellen, dass die Seitennummerierung 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.
Typischerweise wird die Seitennummerierungskomponente 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 mit Flexbox gestaltet — ein flexibles Container-Element, das innerhalb eines anderen verschachtelt ist. Das <nav>-Element wird als flexibler Container definiert, damit wir die Liste mit der Eigenschaft justify-content zentrieren können.
Die Liste selbst wird auch zu einem flexiblen Container, um die Elemente als Reihe anzuordnen. Um die Elemente zu verteilen, können wir entweder einen margin auf den Flex-Elementen verwenden oder einen gap auf dem flexiblen Container hinzufügen.
.pagination {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2px;
}
Zugänglichkeitsbedenken
Wir möchten sicherstellen, dass eine Person, die einen Screenreader verwendet, versteht, was diese Navigation macht und wohin sie gelangen wird, wenn sie auf einen Link klickt. Dazu 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 Attribut aria-hidden auf den Seitennummerierungspfeilen gesetzt.
Der Abschnitt "Siehe auch" am Ende dieses Dokuments enthält Links zu verwandten Zugänglichkeitsthemen.