Dokumentation und Beispiele zum Anzeigen von Paginierungen, um anzuzeigen, dass eine Reihe verwandter Inhalte auf mehreren Seiten vorhanden ist.
Überblick
Wir verwenden einen großen Block verbundener Links für unsere Paginierung, wodurch Links schwer zu übersehen und leicht skalierbar sind – und gleichzeitig große Trefferbereiche bieten. Die Paginierung besteht aus Listen-HTML-Elementen, sodass Screenreader die Anzahl der verfügbaren Links ankündigen können. Verwenden Sie ein Wrapping <nav>-Element, um es als Navigationsabschnitt für Screenreader und andere Hilfstechnologien zu kennzeichnen.
Da Seiten wahrscheinlich mehr als einen solchen Navigationsabschnitt haben, ist es außerdem ratsam, eine Beschreibung aria-labelfür den bereitzustellen <nav>, um seinen Zweck widerzuspiegeln. Wenn beispielsweise die Paginierungskomponente verwendet wird, um zwischen einer Reihe von Suchergebnissen zu navigieren, könnte eine geeignete Bezeichnung aria-label="Search results pages".
Arbeiten mit Symbolen
Möchten Sie für einige Paginierungslinks ein Symbol oder Symbol anstelle von Text verwenden? ariaStellen Sie sicher, dass Sie mit Attributen und dem .sr-onlyDienstprogramm die richtige Screenreader-Unterstützung bereitstellen .
Deaktivierte und aktive Zustände
Paginierungslinks sind für verschiedene Umstände anpassbar. Verwenden Sie dies .disabledfür Links, die nicht angeklickt werden können, und .activeum die aktuelle Seite anzuzeigen.
Während die .disabledKlasse versuchtpointer-events: none , die Link-Funktionalität von s zu deaktivieren , ist diese CSS-Eigenschaft noch nicht standardisiert und berücksichtigt nicht die Tastaturnavigation. Daher sollten Sie immer deaktivierte Links hinzufügen und benutzerdefiniertes JavaScript verwenden, um ihre Funktionalität vollständig zu deaktivieren.<a>tabindex="-1"
Sie können optional aktive oder deaktivierte Anker durch <span>ersetzen oder den Anker im Fall der Zurück-/Weiter-Pfeile weglassen, um die Klickfunktionalität zu entfernen und den Tastaturfokus zu verhindern, während die beabsichtigten Stile beibehalten werden.
Dimensionierung
Lust auf größere oder kleinere Paginierung? Hinzufügen .pagination-lgoder .pagination-smfür zusätzliche Größen.