UI-Justiz

Paginierung

Die Paginierung ist ein Steuerelement, um zwischen Seiten hin und her zu springen.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#1190; #1791; #2491

Aufbau

  1. Pfeil-Button
  2. Zahl-Button
  3. Popup Menü-Button

Verhalten

Im Standardfall werden pro Seite 10 Zeilen angezeigt. Global haben Nutzende die Möglichkeit einzustellen, welches Verhalten sie präferieren und wie viele Einträge pro Seite im Regelfall dargestellt werden sollen (siehe Benutzerbezogene Einstellungen).

Das Steuerelement besteht aus klickbaren Pfeilen und Zahlen. Diese sind als Buttons umgesetzt. Die Pfeile ermöglichen es schrittweise nach links oder rechts durch die Seiten zu navigieren. Die Zahlen springen jeweils direkt zur entsprechenden Seite.

Ist die erste/letzte Seite aktiv wird jeweils der erste/letzte Pfeil deaktiviert.

Sobald über 7 Seiten vorhanden sind, werden Zahlen ausgeblendet. Allerdings ist immer die erste, letzte und aktive Seite mit jeweils der vorherigen und nachfolgenden zu sehen. Fehlende Zahlen werden durch 3 Punkte dargestellt. Das “...”-Element wird als Button mit Pop-Up-Menü umgesetzt. Dabei hat der Button zum einen die textuelle Beschriftung “...” (Punkt Punkt Punkt)”, diese wird jedoch nicht bei Fokuserhalt vom Screenreader ausgelesen. Stattdessen trägt der Button die programmatische Beschriftung “Ausgeblendete Seiten anzeigen”. Dieser Beschriftung wird der Zusatz “([Erste Seitenzahl]-[Letzte Seitenzahl])” angehängt und programmatische Beschriftung plus Seitenzahlenbereich wird zusammen als Tooltip angezeigt, wenn der “...-Button” fokussiert wird. Dabei ist die programmatische Beschriftung im Schriftschnitt bold gesetzt und die Seitenzahlen in regular.

Das Pop-Up-Menü enthält einen Eintrag pro hier ausgeblendeter Seite an. Nach Öffnen des Pop-Up-Menüs ist der erste enthaltene Eintrag fokussiert. Zur Navigation innerhalb siehe Pop-Up-Menü: Bedienung. Mit Auswahl einer dieser Seiten schließt sich das Pop-Up-Menü, die entsprechende Seite wird geladen und der Tastaturfokus wird auf die geöffnete Seitenzahl gelegt.

Ladeverhalten

Wenn das Laden einer Tabellen-/Listenseite nach Paginationswechsel länger dauert, so wird an Stelle des Tabellen-Inhaltsbereichs ein Platzhalter mit Ladesymbol angezeigt. Screenreaderausgabe: Der Alternativtext des Ladesymbols lautet “Daten werden geladen”. Dieser Alternativtext wird automatisch vom Screenreader ausgegeben, auch wenn sich der Fokus nicht auf dem Icon befindet. Allerdings wird er, um Audionoise zu vermeiden, erst dann ausgegeben, wenn 2 Sekunden nach Öffnen der Seite die Inhalte noch nicht vollständig geladen sind. Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Daten werden geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet. 

Der Ladezustand ist fokussierbar. Sobald die Daten der Seite vollständig geladen sind, verschwindet das Ladesymbol und wird durch die entsprechenden Inhalte ersetzt. Liegt der Fokus zu diesem Zeitpunkt auf dem Ladezustand, so wird er anschließend auf das erste interaktive Element der Tabelle gelegt (in der Regel die erste Tabellenspalten-Überschrift ).

Responsives Verhalten

Falls sehr viele Seiten vorhanden sind und der vertikale Platz zur Darstellung nicht ausreicht, werden die vorherige und nächste Seite ausgeblendet: Es sind dann nur noch die erste, aktuelle und letzte Seite, sowie die Pfeile nach rechts und links sichtbar.

Höhe der Tabelle/Liste und Scrollbarkeit

Bei nicht-paginierten Tabellen/Listen (bis 10 Einträge) entspricht deren Höhe immer der summierten Eintragshöhe.

Bei paginierten Tabellen/Listen (ab 11 Einträge) muss sichergestellt werden, dass sich er Paginations-Footer immer an der gleichen Stelle befindet und beim Wechseln zwischen Seiten nicht in der Y-Position springt. Daher haben paginierte Tabellen-/Listen immer eine fixe Höhe. Es wird dabei unterschieden zwischen Tabellen/Listen außerhalb von Formularen und Tabellen innerhalb von Formularen. Listen kommen innerhalb von Formularen nicht vor. Der Paginations-Footer ist in der Regel sticky, bis eine gewisse Tabellen-/Listenhöhe unterschritten wird (siehe Tabelle: Verhalten Tabellen-Footer (Fußzeile) mit Paginierung und Liste: Verhalten des Listen-Footers (Fußzeile) mit Paginierung).

Außerhalb von Formularen gilt:

  • Tabellen/Listen mit bis zu 10 Einträgen sind nicht paginiert. Ihre Höhe entspricht der Summe Eintragshöhe. Ist im Seitenlayout zu wenig Platz in der Horizontalen zur Darstellung aller Einträge verfügbar, so wird die Liste scrollbar.
  • Tabellen/Listen mit über 10 Einträgen werden paginiert. Die Tabellen-/Listenhöhe passt sich dann immer dem maximal auf der Seite verfügbaren Platz an. Bei großen Fensterhöhen kann so ein nicht fokussierbarer Weißraum zwischen dem letzten Eintrag auf einer Seite und dem Paginationsfooter am unteren Seitenrand entstehen. Reicht die Tabellen-/Listenhöhe nicht aus, um alle Einträge auf einer Seite darzustellen, so wird die Tabelle/Liste bzw. die Seite scrollbar (für Details zum Scrollverhalten siehe auch Seitentypen Formular mit Schnellnavigations-Sidebar oder Tabelle/Liste/Baum/Kalender: Verhalten beim Scrollen der Seite).

Innerhalb von Formularen gilt:

  • Bei bis zu 10 Einträgen werden Tabellen nicht paginiert. Die Tabellen-/Listenhöhe entspricht der summierten Höhe aller Einträge. 
  • Ab 11 Einträgen werden Tabellen paginiert. Die Tabellenhöhe ist fix und entspricht dem 5,5 fachen der Eintragshöhe.

Zustände

Barrierefreiheit

Der Alternativtext für Pfeile links & rechts lautet:

  • links: "Vorherige Seite" 
  • rechts: "Nächste Seite”

Dieser wird bei Fokuserhalt ebenfalls als Tooltip dargestellt. 

Für die Screenreader-Ausgabe muss die aktive Seite mit einem zusätzlichen Text versehen werden: “Aktuell geöffnet”.

Bedienung

Tastaturbedienung

  • Tab fokussiert das erste interaktive Element der Paginierung.
  • Nächster Tab springt zum nächsten interaktiven Element der Paginierung.
  • Enter löst die fokussierte Aktion aus.
  • Der Fokus bleibt nach Seitenwechsel auf dem ausgelösten Element, es ist jedoch nicht mehr interaktiv. Wenn der Listen/Tabellenfooter sticky ist (bei ausreichender Höhe), dann wird durch einem Seitenwechsel über den Paginierungsfooter die Scrollposition im Listen/Tabellen-Inhaltsbereich der neu geöffneten Seite zurückgesetzt, d. h. der oberste Listen- bzw. Tabelleneintrag auf der neu geöffneten Seite ist anschließend sichtbar. Falls der Listen/Tabellenfooter (auf Grund geringer Listen/Tabellenhöhe unter 400px) nicht mehr sticky ist, dann wird die Scrollposition beibehalten, damit der Tastaturfokus, welcher im Footer verbleibt, nicht aus dem sichtbaren Bereich verschwindet.
  • Drücken der Home-Taste setzt den Tastaturfokus auf die ersten Seite.
  • Mit End-Taste wird der Tastaturfokus auf die letzte Seite gesetzt.
  • Für Tastaturbedienung und Fokussetzung innerhalb des “Ausgeblendete Seiten anzeigen”-Menüs siehe Pop-Up Menü: Tastaturbedienung.
  • Mit Tab-Taste kann der Ladezustand im Inhaltsbereich der Tabelle/Liste fokussiert werden.

Mausbedienung

  • Klick mit linker Maustaste löst die Aktion aus.
  • Der Fokus bleibt nach Seitenwechsel auf dem ausgelösten Element, es ist jedoch anschließend nicht mehr klickbar. Wenn der Listen/Tabellenfooter sticky ist (bei ausreichender Höhe), dann wird durch einem Seitenwechsel über den Paginierungsfooter die Scrollposition im Listen/Tabellen-Inhaltsbereich der neu geöffneten Seite zurückgesetzt, d. h. der oberste Listen- bzw. Tabelleneintrag auf der neu geöffneten Seite ist anschließend sichtbar. Falls der Listen/Tabellenfooter (auf Grund geringer Listen/Tabellenhöhe unter 400px) nicht mehr sticky ist, dann wird die Scrollposition beibehalten, damit der Tastaturfokus, welcher im Footer verbleibt, nicht aus dem sichtbaren Bereich verschwindet.
  • Für Tastaturbedienung und Fokussetzung innerhalb des “Ausgeblendete Seiten anzeigen”-Menüs siehe Pop-Up Menü: Mausbedienung.
  • Klick mit linker Maustaste auf den Ladezustand einer Tabellen-/Listenseite fokussiert diesen.

Weitere Themen: