Pagination-Software im Vergleich
Blätterleisten, die als Liste ankommen
Linktexte, Liste, Einträge: drei Stellen in jeder Blätterleiste.
Software-Auswahl als Systembild
Eine gute Blätterleiste hält vier Zustände zusammen
Der sichtbare Seitenwechsel reicht nicht. Link, Adresse, Datenausschnitt und Markierung müssen dieselbe Seite meinen.
- 1LinkWeiter führt zu Seite 7.
- 2Adresse
?page=7ist direkt aufrufbar. - 3DatenausschnittEinträge 61–70 werden geladen.
- 4SeitenzustandSeite 7 ist als aktuell benannt.
Vier Wege, vier Stellen für die Kontrolle
Die passende Lösung ist die, deren ausgegebenes HTML und Adressen Sie prüfen und pflegen können.
Passt, wenn Ihr Team Routing und Vorlage besitzt. Jede Seite kann eine eigene Adresse und vollständige Links erhalten.
Grenze Seitenzahl, Sortierung und Filter müssen serverseitig konsistent ausgewertet werden.
paginate_links()Ausgabe prüfenPasst, wenn WordPress die Seiten kennt. type: list liefert eine Liste; aria_current ist standardmäßig page.
Grenze Theme und Übersetzung bestimmen den umgebenden Navigationsnamen sowie die Vor- und Zurück-Texte.
Passt, wenn Filtern, Sortieren und Blättern auf einem großen Datensatz zusammengehören. Pro Ansicht gehen Parameter an den Server.
Grenze Die Datenübertragung erzeugt nicht automatisch eigenständige, verlinkbare Seitenadressen.
Passt, wenn kontinuierliches Erkunden wichtiger ist als der Sprung zu einer bestimmten Ergebnisseite.
Grenze Google folgt Links in href, löst aber keine Schaltflächen aus. Bieten Sie sequenzielle Links und eindeutige URLs als erreichbaren Weg an.
Die Auswahl beginnt bei der Adresse
Inhalte sollen geteilt oder wiedergefunden werden?Serverseitige Seiten oder WordPress-Ausgabe mit eigener URL.
Eine Datentabelle wird gefiltert und sortiert?DataTables kann die Datenarbeit übernehmen; URL und Fokus bleiben Ihre Aufgabe.
Der Strom soll endlos wirken?Scrollen darf ergänzen. Eine verlinkte Seitennavigation hält Inhalte erreichbar.
So prüfen Sie es
- Adresse kopierenÖffnen Sie Seite 7 in einem neuen Tab. Derselbe Ausschnitt muss erscheinen.
- Tastatur verwendenErreichen Sie Vor, Zurück und Seitenlinks mit Tab; Enter muss der sichtbaren Adresse folgen.
- Aktuelle Seite hörenEin Vorleseprogramm soll die Navigation und „aktuelle Seite, 7“ ausgeben.
- Ohne Skript prüfenKontrollieren Sie, ob sequenzielle Seiten weiterhin als echte Links im HTML stehen.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Vor- und Zurück-Pfeile ohne Text Regel link-name
Die Blätterleiste zeigt nur Symbole. Der Linktext nennt das Ziel, etwa „Nächste Seite“.
Kritisch Die Blätterleiste ist keine Liste Regel list
Stehen die Seitenlinks in einem div, fehlt die Zahl der Einträge. Eine ul mit li gibt sie zurück.
Kritisch Ein Seitenlink steht außerhalb der Liste Regel listitem
Der Pfeil hinter dem schließenden ul-Tag gehört als li in dieselbe Liste wie die Seitenzahlen.
Zum Mitnehmen
Die Blätterleiste, korrigiert
Ein nav, eine ul, ein Text in jedem Link.
Korrektur in 3 Schritten ansehen
Die Seitenlinks als Liste ausgeben
Ein nav mit ul und li nennt Vorleseprogrammen den Bereich und die Zahl der Seiten.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="pagination"> <a href="?seite=1">1</a> <a href="?seite=2">2</a> </div>Nachher
<nav class="pagination" aria-label="Seitennavigation"> <ul> <li><a href="?seite=1">1</a></li> <li><a href="?seite=2">2</a></li> </ul> </nav>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit dem Vorleseprogramm in die Blätterleiste. Es nennt „Seitennavigation“ und die Zahl der Einträge.
Den letzten Eintrag zurückholen
Ein li hinter dem schließenden ul-Tag gehört zu keiner Liste. Es gehört in dieselbe ul wie die Seitenzahlen.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul> <li><a href="?seite=2">2</a></li> </ul> <li><a href="?seite=3">Nächste Seite</a></li>Nachher
<ul> <li><a href="?seite=2">2</a></li> <li><a href="?seite=3">Nächste Seite</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Zählen Sie die Einträge, die das Vorleseprogramm ansagt. Der letzte Link zählt jetzt mit.
Den Pfeilen Text geben
Der Text steht im Link und darf visuell verborgen sein. Das Symbol bleibt sichtbar und für Vorleseprogramme ausgeblendet.
KorrekturvergleichSchritt 3 · HTML Vorher
<li> <a href="?seite=3"><span class="icon-next"></span></a> </li>Nachher
<li> <a href="?seite=3"> <span class="sr-only">Nächste Seite</span> <span class="icon-next" aria-hidden="true"></span> </a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jeder Eintrag der Blätterleiste nennt seine Seite.