Accessible Pagination
Sechs Seitenlinks, sechsmal nur „Link“
Linktext, Liste, Zielgröße: drei Stellen, an denen Seitenwahl scheitert.
Anatomie einer Seitenwahl
Jeder Sprung zeigt, woher er kommt und wohin er führt
Eine gute Pagination verbindet sichtbare Orientierung, eindeutige Linkziele und einen verständlichen Zustand nach dem Laden.
- 1Bereich benennen
<nav aria-label="Suchergebnisse, Seiten"> - 2Aktuelle Seite auszeichnen
aria-current="page"steht genau einmal in der Gruppe. - 3Ziel im Namen nennen Die „4“ erhält den Namen „Seite 4 von 8“.
- 4Trefffläche großzügig bauen 44 × 44 CSS-Pixel sind eine robuste Gestaltung über dem WCAG-Mindestmaß.
href="?seite=4"aria-current="page"Bei einem vollständigen Seitenaufruf nennt der Dokumenttitel die neue Seite. Aktualisieren Sie Ergebnisse ohne Seitenaufruf, verschieben Sie den Fokus gezielt auf die Ergebnisüberschrift und ändern Sie den Titel mit.
Vier Zustände, ein verlässliches Muster
Nicht verfügbare Richtungen entfallen. Sie bleiben weder als deaktivierter Link noch als stummer Pfeil stehen.
Erste Seitekein Zurück-Link
In der Mittebeide Richtungen
Letzte Seitekein Weiter-Link
Schmaler ViewportPriorität statt Miniatur
Das vollständige Grundgerüst
Die sichtbaren Wörter bleiben im zugänglichen Namen. Zahlenlinks ergänzen die Seite und, wenn bekannt, die Gesamtzahl.
<nav class="pagination"
aria-label="Suchergebnisse, Seiten">
<ul>
<li>
<a href="?seite=2" rel="prev">
Vorherige Seite
</a>
</li>
<li>
<a href="?seite=1"
aria-label="Seite 1 von 8">1</a>
</li>
<li>
<a href="?seite=2"
aria-label="Seite 2 von 8">2</a>
</li>
<li>
<a href="?seite=3"
aria-label="Seite 3 von 8"
aria-current="page">3</a>
</li>
<li>
<a href="?seite=4"
aria-label="Seite 4 von 8">4</a>
</li>
<li aria-hidden="true">…</li>
<li>
<a href="?seite=8"
aria-label="Seite 8 von 8">8</a>
</li>
<li>
<a href="?seite=4" rel="next">
Nächste Seite
</a>
</li>
</ul>
</nav>.pagination ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.pagination a {
display: inline-grid;
place-items: center;
min-inline-size: 44px;
min-block-size: 44px;
padding-inline: 12px;
border: 2px solid currentColor;
color: #151514;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.pagination [aria-current="page"] {
background: #151514;
color: #ffffff;
font-weight: 700;
}
.pagination a:focus-visible {
outline: 3px solid #3b2bbd;
outline-offset: 3px;
}So prüfen Sie es
- Tabben Sie durch die Links. Reihenfolge und Fokusrahmen bleiben sichtbar.
- Prüfen Sie im Accessibility Tree: ein benannter Navigationsbereich, eine Liste und genau ein
aria-current="page". - Öffnen Sie „Nächste Seite“. URL, Dokumenttitel, Ergebnisinhalt und aktuelle Markierung wechseln auf dieselbe Seitennummer.
- Prüfen Sie bei 320 CSS-Pixeln Breite. Die Links umbrechen oder werden bewusst reduziert; horizontaler Seitenscroll entsteht nicht.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Die Pfeile haben keinen Text Regel link-name
‹ und › sind kein Name. „Vorherige Seite“ und „Nächste Seite“ gehören in den Link, sichtbar oder per aria-label.
Kritisch Die Seitenwahl ist keine Liste Regel list
Als ul in einem nav sagt ein Vorleseprogramm „Seiten, Navigation, Liste mit 7 Einträgen“.
Kritisch Einträge ohne Liste Regel listitem
Ein li braucht ein ul oder ol als Eltern. Sonst zählt niemand mit.
Kritisch 18 Pixel sind kein Ziel Regel target-size
Zahlen mit 2 Pixel Abstand treffen Finger nicht. 44 mal 44 Pixel mit 8 Pixel Abstand schon.
Zum Mitnehmen
Die Seitenwahl, korrigiert
Ein nav, eine Liste, aria-current, ein Mindestmaß.
Korrektur in 2 Schritten ansehen
Die Seitenwahl als benannte Liste bauen
nav benennt den Bereich, ul zählt, aria-current markiert die aktuelle Seite.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="pages"> <a href="?seite=2">‹</a> <a href="?seite=1">1</a> <a href="?seite=3" class="current">3</a> <a href="?seite=4">›</a> </div>Nachher
<nav aria-label="Seiten"> <ul class="pages"> <li><a href="?seite=2" aria-label="Vorherige Seite">‹</a></li> <li><a href="?seite=1" aria-label="Seite 1 von 8">1</a></li> <li><a href="?seite=3" aria-label="Seite 3 von 8" aria-current="page">3</a></li> <li><a href="?seite=4" aria-label="Nächste Seite">›</a></li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die 3. Ein Vorleseprogramm sagt „Seite 3 von 8, aktuelle Seite, Link“.
Jedes Ziel auf 44 Pixel bringen
Ein Mindestmaß und Abstand aus CSS. Die Zahl bleibt gleich groß.
KorrekturvergleichSchritt 2 · CSS Vorher
.pages a { display: inline-block; padding: 0 2px; }Nachher
.pages { display: flex; gap: 8px; } .pages a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }Markierte Zeilen wurden geändert
So prüfen Sie es Messen Sie ein Ziel in den Entwicklerwerkzeugen. 44 mal 44 Pixel, 8 Pixel Abstand.