Paginierung

Verwendung

Optional enthalten Datentabellen eine Paginierung, die unterhalb der Tabelle angezeigt wird. Diese soll allerdings erst eingesetzt werden, wenn es sich um größere Datenmengen mit mehr als 25 Tabellenzeilen handelt. Eine kurze Tabelle auf mehrere Seiten aufzubrechen ist gerade aus Sicht der Nutzenden nicht sinnvoll, auch weil damit der gängige Weg des Suchens in einer Tabelle per Browserfunktion (Strg-F) unterbunden wird.

Insbesondere für Screenreader-Nutzende entstehen bei zu kleinteilig paginierten Datenansichten erhebliche Hürden, da hierdurch typische Strategien zur Erkundung von Inhalten in Datentabellen effektiv verhindert werden.

Die Paginierung ist als Bestandteil von Datentabellen vorgesehen; Content-Seiten haben eine eigene alternative Paginierung in Form einer einfachen Blätterfunktion mit klassischen Links. Diese können optional die gleiche Gestaltung wie Buttons erhalten.

Positionierung & responsives Verhalten

• Die Paginierung nimmt die volle Breite des Layout-Grids ein.
• Die Paginierung wird immer vor dem Footer positioniert. Zwischen Footer und Paginierung bleiben 128px Platz.
• Das Select für die „Eintrage pro Seite“ und die Icon-Buttons zur Navigation werden untereinander angeordnet und zentriert.

Ab dem Breakpoint MD (≥ 768px)

• Das Select für die „Eintrage pro Seite“ und die Icon-Buttons zur Navigation werden nebeneinander und rechtsbündig angeordnet.

Verhalten:

• Einträge pro Seite werden in “25”, “50”, “100” und “Alle” aufgeteilt.
• 25 Einträge pro Seite wird als Standard festgelegt.
• Bis einschließlich 25 Einträgen muss weder die Paginierung, noch das Select für Einträge pro Seite angezeigt werden.
• Ab dem 26. Eintrag wird das Select für Einträge pro Seite (25) angezeigt, da nun auf mehr Einträge pro Seite umgestellt werden kann.
• Immer dann wenn die Summe der Einträge die aktuelle Auswahl für Einträge pro Seite überschreitet muss eine Paginierung angezeigt werden.

Beschriftung

Wenn in der Paginierung Formularelemente wie zum Beispiel ein Select verwendet werden, dann muss zwingend ein zugeordnetes Label vorhanden sein. Aus Platzgründen ist dies in der Regel optisch ausgeblendet; das Design System stellt hierfür die Klasse .visually-hidden zur Verfügung, die an das Label vergeben wird.

Do’s and Dont’s

Design

Typografie

Abstände

Ab dem Breakpoint XS (≥ 0px)

Ab dem Breakpoint MD (≥ 768px)

Barrierefreiheit

Relevante BITV-Anforderungen

• 1.3.1 Info und Beziehungen
• 2.1.1 Tastatur
• 2.4.3 Fokus-Reihenfolge
• 2.4.6 Überschriften und Beschriftungen (Labels)
• 2.4.7 Fokus sichtbar
• 2.4.8 Position
• 2.5.8 Target Size (neu in WCAG 2.2, Link führt zur englischen Fassung)
• 4.1.2 Name, Rolle, Wert

Testhinweise & Akzeptanzkriterien

Rolle:

Identifiziert sich selbst im Screenreader als Navigation.

Zustände:

Die aktuell ausgewählte Seite in der Paginierung ist mit aria-current="page" versehen und verlinkt nicht auf sich selbst.

Fokus:

Links und Buttons in der Paginierung folgen den Vorgaben für diese Elemente.

Darstellung:

Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.

Prüfschritte

• Prüfen Sie, ob alle Paginierungs-Bereiche eine role="navigation" haben.
• Navigieren Sie per Screenreader durch alle Landmarks einer Seite und prüfen Sie, ob Paginierungs-Bereiche beschreibende Begriffe wie „Paginierung“ oder „Blättern“ in einem aria-label enthalten.
• Wenn Beschreibungen oder Labels vom ursprünglichen Wert dynamisch verändert werden, dann prüfen Sie ob der neue Wert korrekt und prägnant ist.
• Navigieren Sie zu allen interaktiven Elementen und prüfen Sie, ob diese mit den Standard-Tastaturbelegungen bedienbar sind, d. h. Enter wenn der Link fokussiert ist, Enter oder Leerschritt wenn der Button fokussiert ist.
• Navigieren Sie zu allen interaktiven Elementen und prüfen Sie, ob diese bei :hover und :focus deutlich hervorgehoben werden.