UI-Justiz

Liste

Mehreren Elemente oder Inhalte in einer vertikalen Anordnung, die sortiert, gefiltert oder mit denen interagiert werden kann.

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

#1190; #1681; #1788; #2058; #2115; #2222; #2328; #2470

Aufbau

Aufbau Liste

  1. Neuanlage-Button (optional)
  2. Suche (optional)
  3. Filter (optional)
  4. Text “[Anzahl] Einträge” (nicht fokussierbar)
  5. Sortierparameter
  6. Sortierrichtung
  7. Erster Listeneintrag
  8. Geöffneter Eintrag
  9. Fußzeile mit Paginierung (optional, je nach Menge der Listeneinträge)

Aufbau Liste mit Trennblöcke

  1. Titel-Trennparameter
  2. [Anzahl] Einträge
  3. Pfeil-Symbol

Aufbau Liste im Formularbereich

  1. Objektbezeichnung
  2. Sortierkriteriumswert
  3. Icon/Bildmarke oder Badge (optional)
  4. Weitere-Aktionen-Button (optional)

Verhalten

Listen bestehen immer aus einem Inhaltsbereich und der darüberliegenden Sortierfunktion. Wie auch bei Tabellen, können sich oberhalb von Listen außerdem Such- und Filtermöglichkeiten befinden, mit denen die Anzahl der angezeigten Inhalte reduziert werden kann (siehe Suchfeld und Filter).

Die Tabreihenfolge ist:

  1. Neuanlage-Button (optional)
  2. Suche (optional)
  3. Filter (optional)
  4. Text “[Anzahl] Einträge” (nicht fokussierbar)
  5. Sortierparameter
  6. Sortierrichtung
  7. Erster Listeneintrag
  8. Fußzeile mit Paginierung (optional, je nach Menge der Listeneinträge)

Jede Liste trägt eine visuell nicht sichtbare programmatische Beschriftung. Diese sollte identisch sein mit der visuell sichtbaren Beschriftung, welche die Liste inhaltlich beschreibt. Die sichtbare Beschriftung kann sein:

  • Seitentitel (bei Listen auf Modul-Startseiten bzw. Modul-Unterseiten, wenn unter dem Seitentitel keine Tabs vorkommen)
  • Beschriftung des aktiven Tabs (bei Listen auf Modul-Startseiten bzw. Modul-Unterseiten mit Tabs unter dem Seitentitel)
  • Schnellnavigations-Titel (bei Listen in der Schnellnavigations-Sidebar)
  • Akkordeontitel (bei Listen in Formularen, die sich direkt einem Akkordeon unterordnen)

Der Text “[Anzahl] Einträge” oberhalb der Liste ist verpflichtend zu verwenden, wenn sich Such- oder Filtermöglichkeiten über der Liste befinden. Falls die Anzahl 0 oder eine beliebige Zahl über 1 ist, wird das Wort “Einträge” verwendet. Falls die Anzahl genau 1 ist, wird statt “Einträge” das Wort “Eintrag” verwendet. Die [Anzahl] der Einträge ist als H3 zu kennzeichnen (visuell und semantisch).

Listen dürfen nur außerhalb von Formularen verwendet werden und dienen beispielsweise dem Wechsel zwischen Objektdetailformularen im Seitentyp “Unterseite eines Moduls: Formular mit Schnellnavigationssidebar”.
Soll innerhalb von Formularen eine Auflistung von Unterobjekten angezeigt werden, so sind dafür Tabellen oder ggf. Karten zu verwenden.

Verhalten des Ladezustands von Listen

Wenn das Laden von Listeninhalten länger dauert, so wird anstelle der Liste ein Platzhalter mit Ladesymbol angezeigt. Dieser ist fokussierbar. Such- und Filtermöglichkeiten über der Liste, der Text “Anzahl Einträge” sowie die Buttons zur Listensortierung werden noch nicht angezeigt, solange die Liste noch nicht vollständig geladen ist.
Der Ladezustand ist im Code als Überschrift der Hierarchiestufe gekennzeichnet, die der Text “[Anzahl] Einträge” im jeweiligen Seitenlayout hätte, damit die Inhaltsstruktur der Seite auch beim Laden konsistent bleibt (in der Regel H2 oder H3, je nach Seitentyp).

Screenreaderausgabe: Der Alternativtext des Ladesymbols lautet “Liste wird geladen”. Dieser wird auch als Tooltip angezeigt, wenn mit der Maus exakt über dem Lade-Icon gehovert wird. Der 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 Listeninhalte noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Liste wird geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet.

Nach vollständigem Laden der Listeninhalte wird der Text “Suche, Filter, Sortierfunktion und [Anzahl] Einträge geladen” vom Screenreader ausgegeben. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.

Sobald die Daten in der Liste vollständig geladen sind, verschwindet das Ladesymbol und wird durch die Listeninhalte ersetzt. Auch die Such und Filtermöglichkeiten über der Liste, der Text “Anzahl Einträge” sowie die Buttons zur Listensortierung komme in diesem Moment dazu. Falls der Tastaturfokus in diesem Moment auf dem Ladezustand lag, wird er dann auf das erste neu hinzugekommene interaktive Element gelegt (Suchfeld falls vorhanden; falls kein Suchfeld vorhanden erstes Element in Filterreihe; falls keine Filterreihe vorhanden, Sortierfunktion der Liste). Falls der Tastaturfokus auf einem anderen Element auf der Seite lag, wird er durch das Fertigladen der Liste nicht versetzt.

Verhalten des Leerzustands

Wenn eine Liste keinerlei Inhalt auf Datenbankebene hat, wird nur ein Eintrag mit dem Inhalt “Keine Einträge vorhanden” angezeigt. Der Eintrag ist fokussierbar, um den Inhalt wahrnehmen zu können.
Die Such-, Filter- und Sortiermöglichkeiten werden in diesem Fall ausgeblendet, da keine Interaktion mit dem Inhalt möglich ist.

Abgrenzung: Die Such-, Filter- und Sortierfunktionen werden nur dann ausgeblendet, wenn die Liste aus Datenbanksicht keine Einträge anzeigt. Wenn ein Nutzer aber durch einen Filter oder eine Suche eine leere Liste erhält, dann sollten die Optionen und die Liste weiterhin sichtbar sein und der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” wird anstelle des ersten Eintrages gezeigt. (Details siehe unten Verhalten von Listeninhalten beim Durchsuchen & Filtern)

Verhalten der Sortierfunktion

Die Sortierfunktion besteht aus zwei Elementen. Das erste steuert das Sortierkriterium, das zweite die Sortierrichtung.

Sortierkriterium

Es handelt sich bei der Funktion um ein Einfach-Auswahlfeld (Single select picker). Visuell kommt die reduzierte Version des Auswahlfeldes zum Einsatz. Im Element wird der Text “Sortierung: [Parameter]” angezeigt. Im Dropdown-Menü sind die möglichen sortierbaren Kriterien sowie das aktuell ausgewählte Sortierkriterium erkennbar. 

Standardmäßig werden Listen immer nach der primären Information alphabetisch aufsteigend sortiert (siehe unten Verhalten des Inhaltsbereichs (Listenelemente)). Die zur Auswahl stehenden weiteren Sortierkriterien sind fachlich je nach Maske vom jeweiligen Teilprojekt zu definieren. 

Der Wert, nach dem die Liste sortiert ist, muss immer im Listenelement sichtbar sein. Wird also nach einem anderen Kriterium als nach der primären Information sortiert, so wird eine sekundäre Information in jedem Listeneintrag sichtbar, die diesen Wert enthält. 

Beispiel: Eine Liste von Personen wird nach “Geburtstag” sortiert: Die Primäre Information in der Liste bleibt “Name, Vorname”, die sekundäre ist das Geburtsdatum der Person.

Ist die Liste paginiert (siehe Paginierung) und der Nutzer befindet sich aktuell nicht auf Seite 1 und der Nutzer ändert das Sortierkriterium im Auswahlfeld oder ändert die Sortierrichtung (aufsteigend/absteigend), so wird dadurch automatisch wieder auf Seite 1 gewechselt. Wird in der Auswahlliste das bereits selektierte Sortierkriterium ausgewählt, so bleibt nach Schließen der Ausklappliste die aktuell geöffnete Seite geöffnet und es wird nicht auf Seite 1 zurück gewechselt.

Sortierrichtung

Der zweite tertiäre Button, welcher nur ein Pfeil-Icon enthält, zeigt die Sortierungsrichtung an:

  • Aufsteigend sortiert: Pfeil zeigt nach oben
  • Absteigend sortiert: Pfeil zeigt nach unten

Wird er geklickt, so dreht sich die Sortierrichtung in die entgegengesetzte Richtung um und das Pfeilicon wird entsprechend um 180° gedreht. Die Beschriftung für diesen Sekundären Button gibt die Aktion an, die bei Klicken des Buttons ausgeführt wird:

  • Wenn Aufsteigend sortiert: “Absteigend sortieren”
  • Wenn Absteigend sortiert “Aufsteigend sortieren”

Falls nicht anders definiert ist standarmäßig das Sortierkriterium “Alphabetisch aufsteigend” aktiviert.

Verhalten der Listenelementhervorhebung

Um eine Listenzeile besonders hervorzuheben, kann der Status, der z. B. als Badge in einem Listenelement angezeigt wird, zusätzlich in Form eines Highlight-Streifens am linken Rand des Tabellenelements hervorgehoben werden. 
Wichtig ist: Diese Hervorhebung am Rand darf nur als zusätzliche grafische Hervorhebung und nicht als alleiniges informationstragendes Element verwendet werden. 

Es kann zwischen sechs verschiedenen Hervorhebungen unterschieden werden: 

  • Vollflächig farbig 
  • Gestreift 1
  • Gestreift 2
  • Gestreift 3
  • Gestreift 4
  • Gestreift 5
  • Gestreift 6

Die Farbe/Graustufe ist beliebig aus dem Katalog der GeFa-Farben wählbar. Wenn möglich ist der Farbkontrast von 4,5:1 zu erfüllen. Dies ist allerdings nicht verplichtend, da die Hauptiinformation durch das Label vermittelt wird (Beispiel: Auskunftssperre = gelb).

Sonderfall “Auskunftssperre”

Der Status-Badge wird vor der primären Information (Name der Person) platziert und wird auch vorher ausgelesen. Der Auskunftssperre-Badge ändert jedoch nichts daran, dass sich das Element anhand seiner Primären Bezeichnung [Nachname, Vorname] in die Sortierung einfügt. Auch kann der Eintrag nur mit einer Zeichenkette angesprungen werden, welche mit dem Anfangsbuchstaben der primären Information beginnt (nicht mit “A” für Auskuntssperre; esseidenn die primäre Bezeichnung beginnt ebenfalls mit “A”).

Verhalten des Inhaltsbereichs (Listenelemente)

Listeneinträge können folgende Elemente beinhalten (diese Elementen werden vom Screenreader in der hier aufgeführten Reihenfolge ausgegeben) : 

  • Primäre Information: Enthält die Objektbezeichnung des Objekts, das in der Überschrift der Liste genannt ist (siehe Auf-/Zuklappbare Schnellnavigation (Sidebar)). Sie ist immer sichtbar und ist im Regelfall visuell als Link dargestellt. Sonderfall: Bei Listeneinträgen mit fehlenden Zugriffsrechten wird die Primäre Information nicht als Link, sondern als Text dargestellt und es wird zusätzlich ein Icon an die Primäre Information angehängt (State disabled). Diese muss als Layoutgrafik deklariert werden. 
  • (optional) Ein Badge, z. B. zur Anzeige des Objektstatus (siehe Badge).
  • (optional) Eine weitere Bezeichnung, falls fachlich absolut notwendig, darf nur in Ausnahmefällen benutzt werden, um Objekte zu differenzieren.
  • Sekundäre Information: Diese enthält den Wert, der oberhalb der Liste als Sortierkriterium gewählt wurde (siehe oben Verhalten der Sortierfunktion). Wurde alphabetisch nach der primären Information sortiert, so wird die sekundäre Information nicht angezeigt oder ausgegeben.
  • (optional) Ein Icon oder eine Bildmarke (z.B. Avatar oder Foto einer Person): Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.
  • (optional) Weitere-Aktionen-Button: Öffnet ein Pop-Up-Menü. Der Tooltip lautet “Weitere Aktionen”. Dieser wird von Screenreadern nicht ausgelesen. 

Es kann nur Grafik oder Badge verwendet werden. Beides gemeinsam ist nicht möglich. 
Die Grafik bei fehlenden Zugriffsrechten kann auch angezeigt werden, wenn ein Badge vorkommt.

Die Höhe jedes einzelnen Listeneintrags passt sich an die Länge der primären und sekundären Informationen an. Beide brechen bei Bedarf um und werden mehrzeilig. Die minimale Höhe eines Eintrags sind 54 Pixel. Wenn keine Sekundäre Information vorhanden ist, sind alle Elemente pro Eintrag (Bildmarke, Status, Text, Weitere-Aktionen-Button) vertikal zentriert zueinander ausgerichtet. Sobald eine sekundäre Information vorhanden ist, sind alle Elemente (Bildmarke, Status, Text, Weitere-Aktionen-Button) top-aligned.

Listeneinträge mit Badges

Primäre Information und Badge werden in der Regel nebeneinander dargestellt. Mindestbreite der Primären Information sind 160 Pixel. Falls diese bei einem längeren Badge-Text nicht mehr erreicht werden kann, so wird der Badge-Inhalt mehrzeilig. 

Ab einer Listenbreiten unter 320 Pixel bzw. sobald die primäre Information die 160px Mindestbreite trotz mehrzeiligem Badge nicht mehr erreichen kann, werden primärer Eintragstext und Status-Badge nicht mehr nebeneinander, sondern untereinander dargestellt.

Interaktion bei Listen in der Schnellnavigations-Sidebar

Wenn Nutzende einen Listeneintrag auswählen, so wird auf der rechten Bildschirmhälfte das entsprechende Formular geöffnet und der geöffnete Listeneintrag wird in der Liste links als selektiert dargestellt.

Falls im rechten Bildschirmbereich ein Formular geöffnet ist, welches ungespeicherte Änderungen enthält und Nutzende wählen in der Schnellnavigations-Sidebar einen anderen Listeneintrag aus, so erscheint eine Sicherheitsabfrage, in der abgefragt wird, ob die Änderungen verworfen werden sollen (siehe Modaldialog: Modaldialoge vom Typ Sicherheitsabfrage). Wird die Meldung bestätigt, werden die Änderungen verworfen, das Formular wird geschlossen und durch das neue soeben ausgewählte Formular ersetzt.
Wird in der Sicherheitsabfrage auf “Abbrechen” gedrückt, so bleibt das Formular mit den ungespeicherten Änderungen geöffnet.

(Details zur Interaktion zwischen Sidebar und Formular siehe Auf-/Zuklappbare Schnellnavigation (Sidebar))

Sonderfall Neuanlage

Falls bei Neuanlage eines Objekts ein Seitentyp mit Schnellnavigations-Sidebar verwendet wird, so wird das Neue Objekt auch in der Liste in der Sidebar dargestellt. 

Dabei wird das Neu-Listenelement an oberster Stelle der Liste positioniert. Falls die Liste Trennblöcke enthält (siehe unten Verhalten Listen-Trennblöcke (als Liste umgesetzt)), so wird das Neu-Listenelement während der Anlage noch über dem ersten Trennblock positioniert. Die Objektbezeichnung lautet “Neue/r/s [Objekttyp]”. Beispiele: 

  • “Neue Abteilung”
  • “Neuer Termin”

Nach fertig ausgeführter Anlage wird das Formular geschlossen und der Nutzer wird wieder auf die Übersichtstabelle (ohne Schnellnavigations-Sidebar) zurückgeleitet. Ein Bestätigungsbanner informiert über die erfolgreich durchgeführte Anlage.

Weitere Aktionen-Menü

Das Weitere-Aktionen-Menü zu einem Eintrag (Aufrufbar entweder über Linksklick auf Weitere-Aktionen-Button, falls vorhanden, oder über Rechtsklick auf Baumeintrag oder über Kontextmenü-Taste oder Shift+F10) kann beliebig viele weitere Aktionen zu einem Listeneintrag enthalten. Wo sinnvoll wird zusätzlich zu den fachlich zu definierenden Aktionen (erwähnt in Userstory) auch die Aktion “In neuem Tab öffnen” als erster Eintrag hinzugefügt.

Wird die Liste in einer Schnellnavigations-Sidebar angezeigt, so wird der Weitere-Aktionen-Button nicht angezeigt. Außdem wird die Zahl der durch Öffnen des Pop-Up-Menüs (via Kontextmenü-Taste/Rechtsklick oder Shift+F10) verfügbaren Aktionen hier eingeschränkt: Fachliche Aktionen werden ausgeblendet und nur die Aktion “In neuem Tab öffnen” bleibt (wo sinnvoll) weiter verfügbar. Im Fall, dass keine Aktion im Pop-Up-Menü verfügbar ist, wird nach Öffnen ein deaktivierter Pop-Up-Menü-Eintrag mit dem Text “Keine Aktion verfügbar.” angezeigt. 
Wird die Liste in einem Formular angezeigt, so wird der Weitere-Aktionen-Button im Listenelement nur dann visuell angezeigt, wenn mehr als die Aktion “Im neuen Tab öffnen” möglich ist.

Verhalten Listen-Trennblöcke (als Liste umgesetzt)

Zur weiteren Untergliederung von Listen können Trennblöcke zwischen den einzelnen Einträgen eingezogen werden. Beispiele: 

  • Liste von Geschäftsverteilungsplänen: Trennblöcke nach Jahren (2021; 2022; ...)
  • Liste von Verfahrensbeteiligten: Trennblöcke nach Parteien (Klagend/Beklagt/Sonstige Beteiligte)
  • Liste von Terminen: Trennblöcke nach Tagen/Wochen/Monaten

Jeder Trennblock enthält:

  • Titel “[Trennparameter]”: Hier wird die Kategorie benannt, nach der getrennt wird. Der Kategorie-Titel (Trennparameter) sollte möglichst kurz sein (1 bis max. 2 Wörter). Falls ein längerer Titel nicht vermeidbar ist, bricht dieser um. 
  • “([Anzahl] Einträge)”. Dabei wird nur die Anzahl der Einträge des jeweiligen Blocks genannt. Falls genau ein Eintrag vorhanden ist, wird das Wort “Eintrag” statt “Einträge verwendet.

Trennblöcke sind nur dann zu verwenden, wenn die Kategorien fix sind und kein Listeneintrag zu zwei Kategorien gleichzeitig gehören kann. Bei Sortierung der Liste bleiben die Blöcke fix bestehen und die Sortierung wirkt sich nur auf die Einträge innerhalb der Blöcke aus. Blockinhalte werden also nie (auch nicht durch Umsortierung) durchmischt. Auch die Reihenfolge der Blöcke selbst bleibt konstant.

Im, über der Liste stehenden Text “[Anzahl] Einträge”, werden nur die wirklichen Listeneinträge gezählt. Die Trennblöcke (Kategorien) sind zwar Teil der Liste, werden aber nicht als Einträge mitgezählt.

Paginierung

Wenn die Liste ab einer gewissen Anzahl von Einträgen paginiert wird und Kategorie-Blöcke sich dadurch über mehrere Seiten erstrecken, dann ändert sich die Betitelung dieser Trennblöcke in:
“[Trennparameter] (Einträge [Anzahl von]–[Anzahl bis] von [Gesamtanzahl])”. Das “–” sollte von Screenreadern als “bis” ausgelesen werden. Auf der folgenden Seite, auf der die Inhalte eines Trennblocks fortgesetzt werden, wird der Trennblock als erster Eintrag erneut wiederholt.
Trennblöcke, die sich ausschließlich auf einer Seite befinden, behalten die Standard-Betitelung (siehe oben Verhalten Listen-Trennblöcke (als Liste umgesetzt)).

Screenreaderausgabe

Der Trennblock-Text (Titel der Kategorie und Anzahl Einträge) wird jeweils mit Fokuserhalt des ersten enthaltenen Listenelements mit ausgelesen. Je nach Navigationsrichtung, kann es das erste oder das letzte Element eines Trennblocks sein.

Wenn ein Trennblock keine Einträge enthält, so wird im Regelfall ein Leer-Eintrag innerhalb mit der Beschriftung “Keine Einträge vorhanden” angezeigt. Falls es fachlich gewünscht ist, dass leere Trennblöcke statt dessen komplett ausgeblendet werden, so kann dies in Userstories beschrieben werden.

Verhalten beim Scrollen

Beim Scrollen der Liste bleibt der Trennblock, zu dem der oberste sichtbare Eintrag gehört, sticky am oberen Listenrand stehen, während die dazugehörigen Einträge scrollbar bleiben. Bei Erreichen des nächsten Blocks, wird dieser dann aus dem sichtbaren Bereich heraus geschoben und durch den folgenden Trennblock ersetzt. 

Ausnahme: Bei einer Fensterhöhe von unter 400px bleiben die Trennblöcke nicht mehr sticky stehen.

Verhalten des Listen-Footers (Fußzeile) mit Paginierung

Der Listenfooter mit Paginierung erscheint, sobald in einer Liste eine bestimme Eintragsanzahl überschritten wird.

Der Listenfooter ist im Regelfall sticky und somit (sofern vorhanden) immer am Ende des Listenbereichs sichtbar. Ab einer Listenhöhe unter 400px ist die Paginierungsfußzeile nicht mehr sticky, scrollt mit der Gesamtliste mit und ist unter dem jeweils letzten Listeneintrag positioniert.

Details siehe Paginierung.

Verhalten von Listeninhalten beim Durchsuchen & Filtern

Über Suche (siehe Suchfeld) und Filter (siehe Filter) können die Inhalte von Listen reduziert werden, so dass Nutzende schnell den gewünschten Eintrag finden (siehe Suchen & Filtern).

Die Summe aller gesetzten Filter und Suchbegriffe definiert die Ergebnismenge in der Liste und der Text “[Anzahl] Einträge” wird nach jeder Änderung entsprechend aktualisiert.

Suchergebnis-Anzeige in Listen

Über das über der Liste liegende Suchfeld, können die Inhalte der Liste reduziert werden. Vom jeweiligen Modul ist zu definieren, welche Attribute durchsucht werden können (siehe Suchen & Filtern).

Fangen Nutzende bei fokussiertem Suchfeld an, zu tippen, so wird der Inhalt der Liste auf diesen Wert hin gefiltert. Listeneinträge, die den eingegebenen Wert nicht enthalten, werden ausgeblendet und die Liste wird bei wachsender Zeichenzahl entsprechend kürzer. Der gefundene Suchbegriff wird in der Ergebnisliste mit blauer Hinterlegung markiert (bei selektierten Einträgen invertiert). Zwischen jeder Wertänderungen und der entsprechenden Aktualisierung der Trefferliste besteht eine Verzögerung von 400ms. So haben Nutzende die Möglichkeit, Ihre Eingabe zunächst zu beenden (statt Ausführen der Aktion bei jedem Tastendruck).

Wird kein Ergebnis gefunden, so wird den Nutzenden der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” angezeigt.

Falls die Serverabfrage für die Suche länger dauert (über 2 Sekunden), wird ein Ladezustand (loading spinner) an Stelle des ersten Listenelements angezeigt, bis Suchergebnisse vorhanden sind.

Filterergebnis-Anzeige in Listen

Über die über der Liste liegenden Filter können die Inhalte der Liste reduziert werden. 

Wird ein existierender Filter geändert, gelöscht oder ein neuer hinzugefügt, so wird der Inhalt der Liste auf diesen Wert hin gefiltert. Listeneinträge, die den/die eingegebenen Wert/e nicht enthalten, werden ausgeblendet und die Liste wird entsprechend kürzer. 

Wird kein Ergebnis gefunden, so wird den Nutzenden der Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” angezeigt.

Falls die Serverabfrage für die Aktualisierung der Trefferliste länger dauert, wird ein Ladezustand (loading spinner) an Stelle des ersten Listeneintrages angezeigt, bis Suchergebnisse vorhanden sind.

Verhalten des Bestätigungsbanners

Bestätigungsbanner informieren Nutzende nach Rückkehr in eine Datenübersicht mit Liste über den erfolgreichen Abschluss einer Aktion mit einem Hauptobjekt.

Details zu Verhalten und Bedienung siehe Erfolgsmeldungen (Synchrone Meldungen).

Responsives Verhalten

Die Breite der Liste passt sich in der horizontalen an den im jeweiligen Seiten- oder Formullarlayout verfügbaren Platz an. (siehe Seitenaufbau)

Responsives Verhalten der Sortierfunktion

Die Sortierfunktion (bestehend aus den zwei oben genannten Elementen) ist immer rechtsbündig zum gesamten Listenelement angeordnet. Die maximale Breite ist die Gesamtbreite der Liste. Reicht der horizontale Platz nicht aus, um das gesamte Sortierparameter anzuzeigen, so wird dieses am Ende mit “...” abgekürzt. Im Auswahl-Dropdown ist nach wie vor der gesamte Text sichtbar, da Inhalte hier mehrzeilig werden.

Falls über der Liste zusätzlich die Anzahl der enthaltenen Einträge dargestellt wird, so kann diese bei ausreichend Platz neben den Sortierfunktionen platziert sein (Rechtsbündig zur Liste). Sobald die Liste unter 400 Pixel breit ist, werden die Elemente untereinander angeordnet. Die Anzahl der Einträge wird dann über den Sortiereinstellungen, nicht mehr daneben, angezeigt.

Zustände

Barrierefreiheit

Die Tabreihenfolge ist: 

  1. Neuanlage-Button (optional)
  2. Suche (optional)
  3. Filter (optional)
  4. Text “[Anzahl] Einträge”
  5. Sortierparameter
  6. Sortierrichtung
  7. Erster Listeneintrag

Jede Liste trägt eine visuell nicht sichtbare programmatische Beschriftung. Diese sollte identisch sein mit der visuell sichtbaren Beschriftung, welche die Liste inhaltlich beschreibt. Die sichtbare Beschriftung kann sein:

  • Seitentitel (bei Listen auf Modul-Startseiten bzw. Modul-Unterseiten, wenn unter dem Seitentitel keine Tabs vorkommen)
  • Beschriftung des aktiven Tabs (bei Listen auf Modul-Startseiten bzw. Modul-Unterseiten mit Tabs unter dem Seitentitel)
  • Schnellnavigations-Titel (bei Listen in der Schnellnavigations-Sidebar)
  • Akkordeontitel (bei Listen in Formularen, die sich direkt einem Akkordeon unterordnen)

Der Text “[Anzahl] Einträge” oberhalb der Liste ist immer verpflichtend anzuzeigen (in Formuaren oder Hauptseiten, mit oder ohne Such- und Filtermöglichkeiten).

Falls die Anzahl 0 oder eine beliebige Zahl über 1 ist, wird das Wort “Einträge” verwendet. Falls die Anzahl genau 1 ist, wird statt “Einträge” das Wort “Eintrag” verwendet.

Der Text “[Anzahl] Einträge” entspricht visuell dem Schrifttyp “Subhead”. Die semantische Überschriftenauszeichnung variiert je nach Seitentyp (siehe entsprechender Seitenaufbau).

Bedienung

Tastaturbedienung

Ladezustand von Listen

  • Mit Tab-Taste kann der Lade-Platzhalter fokussiert werden. 
  • Erneutes Drücken der Tab-Taste bewegt den Fokus zum nächsten interaktiven Element.

Leerzustand

  • Mit Tab-Taste kann der Leer-Eintrag fokussiert werden. Erneutes Drücken der Tab-Taste bewegt den Fokus zum nächsten interaktiven Element. 

Sortierfunktion

  • Mit Tab-Taste wird der Sortierkriteriums-Picker fokussiert. 
  • Enter oder Leertaste öffnet ein Single-Select-Dropdown (weitere Tastaturbedienung im Dropdown: siehe Auswahlfeld, Einfach (Single Select Picker))
  • Nachdem ein Eintrag ausgewählt wurde, befindet sich der Tastaturfokus wieder auf dem Sortierungkriteriums-Picker. 
  • Mit Tab kann zum Sortierrichtungs-Button gesprungen werden. 
  • Enter oder Leertaste kehrt die Sortierrichtung um und der Tastaturfokus bleibt auf dem Button.
  • Erneutes Drücken von Enter oder Leertaste kehrt die Sortierrichtung erneut um und der Tastaturfokus bleibt auf dem Button.
  • Mit Tab kann zum nächsten interaktiven Element gesprungen werden.

Inhaltsbereich (Listenelemente)

  • Wird mit Tab-Taste in die Liste navigiert, so wird der Fokus auf den Listeneintrag gelegt, der als letztes fokussiert war (beim letzten Fokuserhalt der Liste). Falls die Liste vorher noch nicht fokussiert war, wird der erste Listeneintrag fokussiert. Wenn z. B. nach Ausführen einer Suche oder Paginations-Wechsel der zuletzt fokussierte Listeneintrag nicht mehr sichtbar ist und mit Tab in die Liste navigiert wird, so wird der erste Listeneintrag fokussiert.
  • Mit Pfeiltasten nach unten/oben kann der Fokus zum nächsten/vorherigen Listeneintrag gewechselt, unabhängig davon, ob diese aktiv oder deaktiviert dargestellt ist.
  • Leertaste selektiert den Eintrag und öffnet das entsprechende Formular. Die Scrollposition im Formular sowie ggf. geöffnete/geschlossene Akkordeons werden vom vorherigen übernommen. Der Tastaturfokus verbleibt, sofern die Liste weiterhin sichtbar ist (z. B. in der Schnellnavigations-Sidebar), auf dem Listeneintrag. Falls die Liste nicht weiter sichtbar ist, wird der Fokus auf das erste interaktive Element im sich öffnenden Formular/Modal bzw. in den Inhaltsbereich der sich öffnenden Seite gelegt und die Scrollposition wird zurückgesetzt. Falls durch Auswählen eines Listeneintrags ein neues Element hinzugefügt wird (z. B. Suchparameter-Element in erweiterter Suche), so wird der Fokus in dieses neu hinzugefügte Element gelegt.
  • Enter selektiert den Listeneintrag und öffnet auf das entsprechende Formular. Der Tastaturfokus wechselt zum ersten interaktiven Element im Formularbereich. Die Scrollposition wird zurückgesetzt, ebenso im vorherigen Formular geöffnete/geschlossene Akkordeons werden ebenfalls auf den Standard zurückgesetzt. Offener Punkt: Für Screenreadernutzende ist noch ein Shortcut zu definieren, mit dem hier die Enter-Funktion ausgelöst werden kann.
  • Ausnahme: Bei Listeneinträgen ohne Zugriffsrechte (State Disabled) hat die Leer- und Entertaste keine Auswirkung und der Fokus verbleibt unverändert.
  • Falls im vorher geöffneten Formular auf der rechten Bildschirmhälfte (ungespeicherte Änderungen vorliegen, erscheint eine Meldung vom Typ Sicherheitsabfrage (Tastaturbedienung siehe Modaldialog (Synchrone Meldungen))
    • Wenn bestätigt wird, dass Änderungen verworfen werden sollen, wird der eben fokussierte Listeneintrag selektiert und geöffnet. Der Tastaturfokus befindet sich dann im ersten interaktiven Elements des Formulars. Das gilt unabhängig davon, ob per der Listeneintrag initial per Enter oder Leertaste geöffnet wurde.
    • Wenn die Aktion Abbrechen ausgeführt wird, findet keine Änderung statt und der Tastaturfokus wird wieder auf den davor fokussierten Listeneintrag gesetzt. 
  • Mit Tab-Taste kann zum nächsten interaktiven Element auf der Seite gewechselt werden und der Tastaturfokus verschiebt sich entsprechend.
  • Drücken der Home-Taste verschiebt den Fokus auf das erste Element der Liste.
  • Drücken der End-Taste verschiebt den Fokus auf die letzte Element der Liste.
  • Bei Drücken eines oder mehrerer Buchstaben, wird der nächste Eintrag fokussiert, der die entsprechende Zeichenkette beinhaltet (ausgehend vom aktuell fokussierten Eintrag). Nach 1 Sekunde wird die Zeichenkette zurück gesetzt.
  • Drücken der Kontextmenü-Taste bei fokussiertem Listenelement öffnet ein Pop-Up-Menü und setzt den Fokus auf den ersten Menü-Eintrag. Die Pop-Up-Menü-Position ist horizontal zentriert zum Listenelement. Die obere Kante des Pop-Up-Menüs ist vertikal zentriert zum Listenelement.
  • Shift+F10 bei fokussiertem Listenelement öffnet ebenfalls ein Kontextmenü und setzt den Fokus auf den ersten Menü-Eintrag. Die Pop-Up-Menü-Position ist horizontal zentriert zum Listenelement. Die obere Kante des Pop-Up-Menüs ist vertikal zentriert zum Listenelement.

Mit der Listenelement-Hervorhebung ist keine Interaktion möglich.

Mit der Listenelement-Trennblöcken ist keine Interaktion möglich.

Für die Tastaturbedienung des Listen-Footer siehe Paginierung.

Suchergebnis-Anzeige in Listen

  • Siehe Suchfeld.
  • Der Text “Keine Treffer für diese Such- und Filterkriterien gefunden” kann mit der Tab-Taste fokussiert werden.

Filterergebnis-Anzeige in Listen

  • Siehe Filter.
  • Der Text “Keine Treffer für diese Such- und Filterkriterien gefunden” kann mit der Tab-Taste fokussiert werden.

Für die Tastatur des Bestätigungsbanners siehe Erfolgsmeldungen (Synchrone Meldungen).

Mausbedienung

Klick mit linker Maustaste fokussiert den Ladezustand.

Klick mit linker Maustaste fokussiert den Leer-Eintrag. 

Sortierfunktion

  • Klick mit linker Maustaste auf den Sortierkriteriums-Picker öffnet ein Single-Select-Dropdown (weitere Mausbedienung im Dropdown: siehe Auswahlfeld, Einfach (Single Select Picker)).
  • Klick mit linker Maustaste auf den Sortierrichtungs-Button kehrt die Sortierrichtung.
  • Erneutes Klicken auf den Button dreht die Sortierrichtung erneut.

Inhaltsbereich (Listenelemente)

  • Einfacher Klick mit linker Maustaste auf einen der Listeneinträge (ausgenommen den Weitere-Aktionen-Button) selektiert den Listeneintrag, fokussiert und öffnet ihn. Die Scrollposition im Formular sowie ggf. geöffnete/geschlossene Akkordeons werden vom vorherigen übernommen. Falls die Liste nach Öffnen des Eintrags nicht weiter sichtbar bleibt (wie auf einer Seite mit Schnellnavigations-Sidebar), wird der Fokus auf das erste interaktive Element im sich öffnenden Formular/Modal gelegt und die Scrollposition wird zurückgesetzt. Falls durch Auswählen eines Listeneintrags ein neues Element hinzugefügt wird (z. B. Suchparameter-Element in erweiterter Suche), so wird der Fokus in dieses neu hinzugefügte Element gelegt. Ausnahme: Klick mit linker Maustaste auf einen deaktivierten Listeneintrag setzt die visuelle Hervorhebung auf diesen, es wird jedoch keine Aktion ausgeführt.
  • Doppelklick mit linker Maustaste auf einen der Listeneinträge (ausgenommen den Weitere-Aktionen-Button) selektiert den Listeneintrag und öffnet das Formular. Der Tastaturfokus wird auf das erste interaktive Element im Formularbereich gelegt. Die Scrollposition wird zurückgesetzt, ebenso im vorherigen Formular geöffnete/geschlossene Akkordeons werden ebenfalls auf den Standard zurückgesetzt. Offener Punkt: Für Screenreadernutzende ist noch ein Shortcut zu definieren, mit dem hier die Enter-Funktion ausgelöst werden kann.
  • Falls im vorher geöffneten Formular auf der rechten Bildschirmhälfte ungespeicherte Änderungen vorliegen, erscheint eine Meldung vom Typ Sicherheitsabfrage (Mausbedienung siehe Modaldialog (Synchrone Meldungen))
    • Wenn bestätigt wird, dass Änderungen verworfen werden sollen, wird der eben geklickte Listeneintrag selektiert und geöffnet. Der Tastaturfokus befindet sich dann im ersten interaktiven Elements des Formulars. Das gilt unabhängig davon, ob per der Listeneintrag initial per Einfach- oder Doppelklick geöffnet wurde.
    • Wenn auf Abbrechen geklickt wird, findet keine Änderung statt und der Tastaturfokus wird wieder auf den davor fokussierten Listeneintrag gesetzt.
  • Klick mit linker Maustaste auf ein anderes interaktives Element auf der Seite oder einen anderen Listeneintrag wechselt den Fokus entsprechend.
  • Einfacher Klick mit linker Maustaste auf den “Weitere Aktionen”-Button ganz rechts in einem Listenelement öffnet ein Pop-Up-Menü (Bedienung siehe Pop-up-Menü).
  • Einfacher Klick mit rechter Maustaste auf eine beliebige Stelle eines Listenelements außer den Weitere-Aktionen-Button öffnet das Weitere-Aktionen-Menü. Dieses öffnet sich an der Stelle, an der vom Nutzer geklickt wurde (linke obere Ecke entspricht Mausklickposition). 
  • Klick mit mittlerer Maustaste auf eine beliebige Stelle eines Listenelements außer den Weitere-Aktionen-Button öffnet das Objekt im neuen Browsertab. Der aktuell geöffnete Browsertab bleibt im Vordergrund und das Baumelement wird fokussiert.

Mit der Listenelement-Hervorhebung ist keine Interaktion möglich.

Mit der Listenelement-Trennblöcken ist keine Interaktion möglich.

Für die Mausbedienung des Listen-Footer siehe Paginierung.

Suchergebnis-Anzeige in Listen

  • Siehe Suchfeld.
  • Klick mit linker Maustaste auf “Keine Treffer für diese Such- und Filterkriterien gefunden” fokussiert dieses.

Filterergebnis-Anzeige in Listen

  • Siehe Filter.
  • Klick mit linker Maustaste auf “Keine Treffer für diese Such- und Filterkriterien gefunden” fokussiert dieses.

Für die Mausbedienung des Bestätigungsbanners siehe Erfolgsmeldungen (Synchrone Meldungen).

Weitere Themen: