UI-Justiz

Tabelle

Tabellen sind geordnete Darstellungen von Informationen und Daten, die in Zeilen und Spalten aufgeteilt werden.

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

#473; #1190; #1278; #1661; #1682; #1690; #1722; #1788; #2047; #2058; #2077; #2115; #2269; #2469; #2484; #2495; #2694

Aufbau

  1. Ansichtswechsel-Schalter (optional)
  2. Neuanlage-Button (optional)
  3. Suche (optional)
  4. Filter (optional)
  5. Text “[Anzahl] Einträge” (nicht fokussierbar)
  6. Funktionsbutton (optional - aktuell nur im Modul KTR zur Terminsfindung über Tabellen zulässig)
  7. Menu-Button “Tabellen-Einstellungen”
  8. Tabellen-Header
  9. Tabelleninhalt
  10. Tabellen-Footer
  1. Häkchen-Symbol
  2. Bestätigungstext
  3. Schließen-Symbol
  1. [Anzahl] Ausgewählte Elemente
  2. “Auswahl aufheben”-Button
  3. 1-n Aktionsbuttons

Verhalten

Jede Tabelle besitzt einen Kopfbereich (Details siehe Tabellenheader), wo zu jeder Spalte eine kurze sowie aussagekräftig Spaltenüberschrift enthalten ist und einen Inhaltsbereich (Details siehe Tabelleninhalt). Bei langen Tabellen kommt noch eine Fußzeile dazu, welche die Navigation der Paginierung enthält (Details siehe unten Tabellenfooter mit Paginierung).

Jede Tabelle trägt eine visuell nicht sichtbare programmatische Beschriftung. Diese sollte identisch sein mit der visuell sichtbaren Beschriftung, welche die Tabelle inhaltlich entweder direkt (z. B. Tabellenüberschrift) oder im Kontext (z. B. Seitentitel) beschreibt. Die sichtbare Beschriftung kann sein:

  • Seitentitel (bei Tabellen auf Modul-Startseiten bzw. Modul-Unterseiten, wenn unter dem Seitentitel keine Tabs vorkommen)
  • Beschriftung des aktiven Tabs (bei Tabellen auf Modul-Startseiten bzw. Modul-Unterseiten mit Tabs unter dem Seitentitel)
  • Akkordeontitel (bei Tabellen in Formularen, die sich direkt einem Akkordeon unterordnen)
  • Tabellenüberschrift (in Formularen bei Tabellen, die sich nicht direkt unter einem Akkordeon befinden)

Oberhalb von Tabellen können sich außerdem Such- und Filtermöglichkeiten befinden, mit denen die Anzahl der angezeigten Inhalte reduziert werden kann. 
(siehe Suchfeld und Filter) 
(“Such- und Filterergebnisanzeige” in der Tabelle siehe unten Verhalten bei Durchsuchen und Filtern von Tabelleninhalten)

Die Elementreihenfolge ist wie folgt (definiert die Vorlesereihenfolge für Screenreader und Tab-Reihenfolge, falls fokussierbare Elemente enthalten sind):

  1. Ansichtswechsel-Schalter (optional)
  2. Neuanlage-Button (optional)
  3. Suche (optional)
  4. Filter (optional)
  5. Text “[Anzahl] Einträge” (nicht fokussierbar)
  6. Funktionsbutton (optional - aktuell nur im Modul KTR zur Terminsfindung über Tabellen zulässig)
  7. Menu-Button “Tabellen-Einstellungen”
  8. Tabellen-Header
  9. Tabelleninhalt
  10. Tabellen-Footer (optional, je nach Eintragszahl)
  11. Mehrfachauswahl-Fußzeile (optional)
  12. Hinzufügen-Button (optional)

Der Text “[Anzahl] Einträge” oberhalb der Tabelle ist immer verpflichtend anzuzeigen (in Formularen oder Hauptseiten, mit oder ohne Such- und Filtermöglichkeiten).
Falls genau ein Eintrag vorhanden ist, wird das Wort “Eintrag” statt “Einträge verwendet.
Der Text “[Anzahl] Einträge” entspricht visuell dem Schrifttyp “Subhead”. Die semantische Überschriftenauszeichnung variiert je nach Seitentyp (siehe entsprechender Seitenaufbau).

Tabellen in Formularen

Wird eine Tabelle innerhalb eines Formulars angezeigt, so ist der Hinzufügen-Button immer direkt unterhalb der Tabelle positioniert.
Die Mehrfachselektions-Fußzeile (falls vorhanden) befindet sich bei Tabellen in Formularen immer unterhalb der Tabellenfußzeile oder, falls keine Paginierung vorhanden, unter dem letzten Tabelleneintrag. Details siehe Mehrfachauswahl-Footer.

Verhalten der Funktion “Tabellen-Einstellungen”

Über allen Datentabellen ist rechts oben ein Menü-Button mit der Bezeichnung “Tabelle konfigurieren” vorhanden. 

Der Button öffnet ein Pop-Up-Menü, in welchem folgende zwei Funktionen angeboten werden können: 

  • “Mehrfachselektion aktivieren” (wenn deaktiviert) bzw. “Mehrfachselektion deaktivieren” (wenn aktiviert): Vom Fachprojekt ist zu definieren, ob diese Funktion bei der Tabelle angeboten wird und ob sie im Standardzustand aktiviert bzw. deaktiviert ist. Die Beschriftung beschreibt jeweils die Aktion, die durch Ausführen des Buttons ausgeführt wird.
  • Spalten konfigurieren: Bei allen Tabellen vorhanden (in Formularen optional).

Beschreibung des Verhaltens nach aktivieren/deaktivieren der Mehrfachselektions-Funktion: siehe unten Verhalten Mehrfachauswahl-Fußzeile. Nach Ausführen der Aktion “Mehrfachselektion aktivieren” bzw. “Mehrfachselektion deaktivieren” wird das Pop-Up-Menü geschlossen und der Tastaturfokus liegt wieder auf dem Tabellen-Einstellungs-Button.

Falls die “Mehrfachauswahl aktivieren/deaktivieren”-Funktion bei der Tabelle nicht angeboten wird, so enthält das Pop-Up-Menü nur eine Option: Spalten-Einstellungen.

Nach Ausführen der Aktion “Spalten konfigurieren” öffnet sich ein Modal. Der Tastaturfokus wird auf das erste interaktive Element im Formular gestzt. Nach Schließen des Modals liegt der Fokus wieder auf dem Tabellen-Einstellungs-Button.

Verhalten des Modals “Spalten konfigurieren”

Wird die Funktion “Spalten konfigurieren” über den Menü-Button über einer Tabelle ausgeführt, so öffnet sich ein entsprechendes Modal. Dieses enthält folgende Elemente:

  • Mehrfach-Auswahlfeld “Einblendbare Spalten”
  • Tabelle “Spalten-Reihenfolge”
  • Button “Auf Standard zurücksetzen”

Sichtbare Spalten

Vom Fachprojekt muss definiert werden, welche Spalten bei einer Tabelle im Standard-Zustand sichtbar sind und welche optional von Nutzern hinzugefügt werden können. Im Standardfall sollte die Anzahl sichtbarer Spalten 6 nicht überschreiten (zzgl. Aktionen-Spalte). Über das Mehrfachauswahlfeld “Einblendbare Spalten” können Nutzende Spalten an- bzw. abwählen. Dabei taucht die Spalte, die als Row-Header definiert ist, sowie Aktionsspalten mit Buttons, Checkboxen oder Radio-Buttons, nicht in der Ausklappiste auf, da diese nicht ausgeblendet werden können.

Spalten-Reihenfolge

Alle im Mehrfach-Auswahlfeld selektierten Werte werden in der Tabelle als je eine Zeile angezeigt. Spalten mit Radio-Buttons oder Checkboxen am Beginn der Tabelle tauchen nicht als Zeilen auf, denn diese müssen an erster Stelle bestehen bleiben.
Über die Aktionsbuttons “Hochschieben” und “Runterschieben” in jeder Zeile kann die Reihenfolge der Einträge geändert werden. Dabei sind beide Buttons der ersten Spalte (Row-Header) deaktiviert, denn die erste Spalte, welche die Objekt-Bezeichnung enthält, muss immer an erster Position stehen bleiben.Ebenso ist beim Eintrag auf Position 2 der Hochschieben-Button und beim Eintrag auf letzter Position der Runterschieben-Button deaktiviert. Die Tooltips der Aktionsbuttons lauten: 

  • “[Attribut] hochschieben auf Position [darüberliegende Position]”
  • “[Attribut] runterschieben auf Position [darunterliegende Position]”

Wird eine der Aktionen ausgeführt, so wird die Zeile entsprechend hoch/runtergeschoben und der Tastaturfokus bleibt auf dem Element, so dass ein Objekt ohne Fokuswechsel mehrere Schritte hintereinander hoch-/runtegeschoben werden kann. Erreicht ein Element die zweite bzw. letzte Position und der Button wird deaktiviert, so springt der Fokus zum jeweils anderen Hoch-Runter-Button, der noch aktiv ist.

Beispiel für Screenreaderausgabe: 

  • Das Attribut “Geburtstag” in Zeile 4 ist selektiert.
  • “Geburtstag hochschieben auf Position 3” > (wird ausgeführt) > “Geburtstag hochschieben auf Position 2” > (wird ausgeführt) > (Fokus springt auf Runterschieben-Button) “Geburtstag runterschieben auf Position 3”

Standard Wiederherstellen

Der Button ist noch deaktiviert, solange noch keine Änderungen an den Standard-Einstellungen vorgenommen wurden. Durch Ausführen der Aktion werden Werte in den Feldern “Sichtbare Spalten” und die Positionen in der Tabelle “Spalten-Reihenfolge” auf den vom Projekt definierten Ursprungszustand zurückgesetzt. Der Tastaturfokus blieibt nach Ausführen der Aktion auf dem Button.

Durch Klick auf “Speichern” im Modal-Footer werden die Eingaben in die Nutzereinstellungen des eingelogten Nutzers übernommen und das Modal wird geschlossen. Die Tabelle wird entsprechend angepasst und auch nach Logout/Login sind die getätigten Änderungen für diese Tabelle weiterhin aktiv. Der Tastaturfokus liegt nach Schließen des Modals wieder auf dem Tabellen-Einstellungs-Button.

Offener Punkt: Editierbare Spaltenbreiten. Dies könnte ggf. als weiterer Multi-Picker mit der Bezeichnung “Spaltenbreite an Inhalt anpassen” umgesetzt werden. Darin kann ausgewählt werden, bei welchen Spalten immer der komplette Inhalt angezeigt wird. Die Spaltenbreite passt sich dann entsprechend dem längsten Inhalt an.

Verhalten von Tabelle auf Hintergründen

Eine Tabelle kann sowohl innerhalb eines Formulars (auf weißem Hintergrund) als auch auf einer Seite mit grauem oder blauem Hintergrund vorkommen. 

Wird die Tabelle auf grauem/blauem Hintergrund platziert, so erhält das Gesamt-Tabellenelement 4px abgerundete Ecken und einen Schlagschatten (siehe Farben & Schattierungen). 

Auf weißem Hintergrund hat die Tabelle keinen Schlagschatten.

Verhalten von Tabellen im Ladezustand

Wenn das Laden von Tabelleninhalten länger dauert, so wird anstelle der Tabelle (inkl. Header und Footer) ein Platzhalter mit Ladesymbol angezeigt. Dieser ist fokussierbar. Such- und Filtermöglichkeiten über der Tabelle, der Text “Anzahl Einträge” sowie der Button für Tabelleneinstellungen werden noch nicht angezeigt, solange die Tabelle 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 “Tabelle 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 Tabelleninhalte noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Tabelle wird geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet. 

Nach vollständigem Laden der Tabelleninhalte wird der Text “Suche, Filter, Tabelleneinstellungen 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 Tabelle vollständig geladen sind, verschwindet das Ladesymbol und wird durch die Tabelleninhalte ersetzt. Such- und Filtermöglichkeiten über der Tabelle, der Text “Anzahl Einträge” und der Tabelleneinstellungen-Button kommen 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, Tabelleneinstellungen). Falls der Tastaturfokus auf einem anderen Element auf der Seite lag, wird er durch das Fertigladen der Tabelle nicht versetzt.

Verhalten von Tabellen im Leerzustand

Wenn eine Tabelle keinerlei Inhalt auf Datenbankebene hat, werden sowohl Tabellenheader, als auch Tabellenfooter ausgeblendet und nur eine Zelle mit folgendem Inhalt angezeigt:
“Keine Tabelleneinträge vorhanden”.

Diese Zelle ist fokussierbar, um den Inhalt wahrnehmen zu können.

Die Such- und Filtermöglichkeiten sowie die Tabellen-Einstellungen werden in diesem Fall ausgeblendet, da keine Interaktion mit dem Inhalt möglich ist.

Abgrenzung: Die Such- und Filterfunktionen werden nur dann ausgeblendet, wenn die Tabellen aus Datenbanksicht keine Einträge anzeigt. Wenn ein Nutzer aber durch einen Filter oder eine Suche eine leere Tabelle erhält, dann sollten die Optionen weiterhin sichtbar sein (siehe unten Verhalten bei Durchsuchen und Filtern von Tabelleninhalten)

Sonderfall

Wenn eine Tabelle mit Null Einträgen innerhalb eines Formulars angezeigt wird und sich unter der Tabelle ein “[Element] hinzufügen”-Button befindet, so wird statt des Leer-Eintrags die ganze Tabelle ausgeblendet. Die Information “Keine Einträge vorhanden” wird in diesem Fall durch den Seiten- oder Akkordeontitel bzw. falls die Tabelle nicht an erster Stelle eines Formulars oder Akkordeons steht durch die Tabellenüberschrift und den direkt nachfolgenden Hinzufügen-Button vermittelt. 

Falls nur durch das Setzen von Filtern eine leere Tabelle zustande kommt, die Tabelle im ungefilterten Zustand aber Einträge hätte, dann wird der Leerzustand mit dem Text “Kein Treffer für diese Such- und Filterkriterien gefunden.” (siehe unten Verhalten bei Durchsuchen und Filtern von Tabelleninhalten) weiterhin angezeigt.

Verhalten Tabellen-Header

Der Tabellenheader beinhaltet aussagekräftige Titel in jeder Spalte der Tabelle. Er bleibt beim Scrollen der Tabelle sticky stehen, sodass die Spaltenüberschriften jederzeit sichtbar sind.

Standardsortierung von Tabellen:

  • Alle Spalten einer Tabelle sind sortierbar (mit Ausnahme der “Auswahl”- und “Aktionen”-Spalten).
  • Sollen weitere Spalten nicht sortierbar sein, muss dies in den User Stories beschrieben werden.
  • Tabellen werden bei Seitenaufruf anhand der ersten Spalte sortiert (Tabellen mit Auswahlspalte werden anhand der zweiten Spalte sortiert). In User Stories kann auch eine andere eingeblendete Spalte für die Sortierung bei Seitenaufruf definiert werden. Es gelten folgende Sortierungen je nach Datentyp:
    • Spalten mit Zeitangaben werden chronologisch absteigend (neue Einträge zuerst) sortiert. 
    • Alle anderen Spalten werden alphanumerisch aufsteigend (A–Z) sortiert.
    • Sortierungen die weder chronologisch noch alphanumerisch sind (z.B. nach Status), müssen in User Stories beschrieben werden.
  • Bei einer “starren” Tabelle ohne Sortierfunktion muss die Sortierung nicht anhand des Spaltenkopfs erkennbar sein. Die Inhalte sollten dennoch einer logischen / kontextabhängigen Sortierung folgen, die über die User Story definiert werden muss.

Spalten, die sich sortieren lassen, sind Tertiäre Buttons mit einem Sonderdesign. Die Punkt-Grafik neben dem Spaltentitel (Sortierindikator), gibt einen visuellen Hinweis, dass sich die Spalte sortieren lässt und muss als Layoutgrafik definiert sein. Die Grafik wechselt zu einem Pfeilsymbol, um die Sortierung anzuzeigen (aufsteigend oder absteigend). Der Alternativtext für die Pfeilgrafiken lautet: “Absteigend sortiert” bzw. “Aufsteigend sortiert”.

Bei sortierten Spalten gibt der Screenreader die Sortierung mit aus, bei unsortierten wird nur der Name ausgegeben.

Durch Klicken auf eine der Spaltenüberschriften, kann diese als Sortierkriterium ausgewählt werden. Durch erneutes Klicken kann die Sortierrichtung gewechselt werden. Daraufhin dreht sich der Pfeil in die entsprechend andere Richtung um.

Ist die Tabelle paginiert und der Nutzer befindet sich aktuell nicht auf Seite 1 und der Nutzer führt eine Umsortierung über den Spaltenheader aus, so wird dadurch automatisch wieder auf Seite 1 gewechselt.

Sind die Werte der Zellen rechtsbündig ausgerichtet, ist auch die Spaltenüberschrift rechtsbündig ausgerichtet und andersrum. Werden die Inhalte einer Spalte mit Einheiten, wie z.B. Währungen, Prozentangaben, oder einer Anzahl angegeben, so wird die Einheit nur im Spaltentitel und der Wert ohne Einheit in den Tabellenzellen aufgeführt.

Sonderfall: Werden innerhalb einer Spalte mehrere Einheiten verwendet, werden die Einheiten in die Zelle geschrieben. Spaltenüberschrift und Zelleninhalt werden dann linksbündig ausgerichtet. Diese Ausnahme gilt nur für die betroffene Spalte. Weitere Spalten der selben Tabelle folgen dem Standardverhalten.

Wenn ein Spaltentitel mehrzeilig wird, nimmt die gesamte Headerzeile diese Höhe ein und alle Spaltentitel sind an der Unterkante ausgerichtet.

Radio-Button- bzw. Checkbox-Spalten im Tabellenheader

Spalten zur Selektion ganzer Tabellenzeilen (Checkboxen oder Radiobuttons) werden stets als eigene Spalte dargestellt und ganz links positioniert.

Spalten mit Radiobuttons tragen den Spaltentitel „Auswahl“.

Bei Checkbox-Spalten wird anstelle einer textuellen Spaltenüberschrift eine Checkbox im Spaltenkopf verwendet. Diese ermöglicht das Aus- bzw. Abwählen aller Einträge und ist mit „Alle Einträge“ bzw. „Alle Einträge auf aktueller Seite“ (bei paginierten Tabellen) beschriftet.

Beim Betätigen dieser Checkbox werden ausschließlich auswählbare (aktive) Checkboxen selektiert. Deaktivierte (disabled) Checkboxen bleiben unverändert und werden von der Sammelauswahl nicht berücksichtigt.
Sind alle auf der aktuellen Seite angezeigten Checkboxen deaktiviert, ist auch die Checkbox im Spaltenkopf deaktiviert.

Wird innerhalb der Tabelle navigiert und der Fokus befindet sich auf einer Checkbox oder einem Radiobutton zur Auswahl eines einzelnen Eintrags, wird die Spaltenbezeichnung „Auswahl“ zusätzlich ausgegeben. Details zu Verhalten und Beschriftung sind im Abschnitt „Tabelleninhalt“ definiert.

Verhalten von Tabellenzeilen/-inhalten

Eine Tabellen-Zelle kann folgende Elemente enthalten: 

  • Checkbox / Radio-Button: Details siehe unten im Abschnitt “Radio Button und Checkbox-Spalten”
  • Text
  • Link: Sonderfall, Inhalte mit fehlenden Zugriffsrechten werden als dunkel grauen Text und nicht als Link dargestellt und es wird zusätzlich ein Icon angehängt, welches auf die fehlenden Zugriffsrechte hinweist. Dieses trägt den Alternativtext “Keine Zugriffsrechte”. Wenn der Eintragstext länger ist, als in der Zelle darstellbar, so wird der Text am Ende mit “...” abgekürzt. Das Symbol führ fehlende Zugriffsrechte wird dabei weiterhin am Zellenende angezeigt, wird aber nicht im Tooltip angezeigt.
  • Bei Links die sich separat öffnen, also den aktuellen Browsertab nicht überschreiben, wird eine Pfeil-Grafik auf der rechten Seite des Links hinzugefügt. In diesem Fall trägt der Link die zusätzliche Beschreibung “Öffnet sich im neuen Tab oder Fenster” und die Pfeil-Grafik muss als Layoutgrafik deklariert werden.
  • Bildmarke/Icon + Text/Link: Kommt eine Grafik gemeinsam mit Text in einer Zelle vor, so ist diese als Layoutgrafik zu deklarieren und die Information muss über den Eintragstext wahrnehmbar sein.
  • Grafik: Wird eine Grafik allein in einer Zelle angezeigt, so muss ein Alternativtext hinterlegt werden. Dieser wird bei fokussieren der Zelle bzw. Mouse-Hover auch als Tooltip angezeigt.
  • Numerische Inhalte: Numerische Werte, mit denen statistische und arithmetische Berechnungen möglich sind, werden rechtsbündig und an Kommastellen ausgerichtet. Alle anderen, aus Ziffern bestehenden Werte, wie z.B. Zeitstempel (bestehend aus Datum und Uhrzeit), Raumnummern, durch Semikolon getrennnte Werte o.ä., sind linksbündig ausgerichtet. Siehe Schriften: Textausrichtung.
  • Zeitstempel, bestehend aus Datum + Uhrzeit als absolute oder relative Angabe (Detaildefinitionen siehe Schriften: Zeit): Diese werden linksbündig ausgerichtet. Die Spalte für Zeitstempel ist immer fix 200px breit, so dass hier keine Umbrüche entstehen.
  • Datum und Uhrzeit-Zeitraum: In Tabellen wo ein Datum und ein Uhrzeit-Zeitraum in einer Zelle dargestellt werden, kommt nach dem Datum immer ein Umbruch. Der Zelleninhalt kann auch als Link dargestellt werden. Format: “[Wochentag in Kurzform], [Datum], [Umbruch] [Zeitraum]”. Beispiel:
  • Badge: Zellen mit Badges kommen meist zur Darstellung von Statusinformationen zum Einsatz - im Regelfall in einer eigenen Tabellenspalte. Falls auf Grund fachlicher Besonderheiten mehr Aufmerksamkeit auf bestimmte einzelne Werte oder Attribute in der Tabelle gezogen werden soll, so können zu diesem Zweck auch in Spalten mit Text, Link oder numerischem Inhalt zusätzliche Badges in den Zellen ergänzt werden (nicht zulässig sind Zusatzbadges in Spalten, wo mehrere mit Semikolon voneinander getrennte Attribute pro Zelle angezeigt werden könnten). Zusatzbadges werden in Zellen immer unter dem eigentlichen Zelleninhalt in einer eigenen Zeile platziert (Ausnahme: Bei Auskunfts- und Verfahrenssperre oberhalb, siehe Tabellenzeilen-Hervorhebung). Der Haupt-Zelleninhalt kann dann nur noch einzeilig dargestellt werden. Die Ausrichtung von Zelleninhalt und Badge richtet sich nach dem Eintragstyp (z. B. Rechtsbündig bei numerischen Inhalten, siehe auch Textausrichtung). Bei Fokuserhalt einer solchen Zelle wird der Badge-Text oder Alternativtext nach dem Eintragstext vorgelesen (Ausnahme: Verfahrens- oder Auskunftssperre). Ist der Text in der Inhaltszeile länger als im verfügbaren Platz darstellbar, so wird er am Ende der Zeile mit “...” abgekürzt - der Badge in der Zeile darunter (bzw. in oben beschriebenen Ausnahmefällen darüber) bleibt weiterhin sichtbar. Details siehe unten “Verhalten bei langem Zellen-Inhalt.”
  • Markierung für fehlerhafte Einträge: Diese kann in normalen Textzellen oder Textzellen mit vorangestelltem Icon/Personensymbol an den Text angehängt werden (nicht bei Links). Die Markierung dient dazu, in Formulartabellen fehlerhafte Unterobjekte grafisch hervorzuheben. Dabei wird das Icon immer nur am Rowheader ergänzt – es kann also nicht mehrmals pro Zeile vorkommen. Der Alternativtext des Symbols, welcher bei Fokuserhalt der Zelle vom Screenreader nach dem Eintragstext ausgelesen wird lautet “– Fehlerhaft”.
  • Aktionsbuttons: Diese befinden sich in der Regel in der letzten Tabellenspalte. Es können bis zu 2 Buttons nebeneinander dargestellt werden. Sind mehr als zwei Aktionen zu einer Zeile verfügbar, so werden diese zu einem “Weitere Aktionen”-Button zusammengefasst. Der Button öffnet ein Pop-Up-Menü, von dem aus die Einzelaktionen aufrufbar sind. Die programmatische Beschriftung des Buttons lautet “Weitere Aktionen zu [Inhalt Spate 1]”. Der Tooltip des Buttons lautet nur “Weitere Aktionen”. Wenn eine Tabellenzeile über einen Aktionen-Button gelöscht wird, dann liegt der Tastaturfokus anschließend auf der ersten Zelle der nächsten Zeile. Falls es sich bei der gelöschten Zeile um die letzte gehandelt hat, dann liegt der Fokus auf der ersten Zelle der vorherigen Zeile.
  • Info-Button in Spalte “Details”: Dieser Button kann in einer Tabellenspalte verwendet werden, um zusätzliche Informationen in einem Info-Modal anzeigen zu lassen. Die programmatische Beschriftung des Buttons lautet “Weitere Informationen”. Der Tooltip des Buttons lautet nur “Weitere Informationen”. (Detailbeschreibung siehe Infobox).

Es ist darauf zu achten, dass die Gesamtzahl an interaktiven Elementen innerhalb einer Zeile nicht zu hoch wird (im Idealfall maximal 3). Die interaktiven Elemente verhalten sich entsprechend ihrer Standarddefinition. 

Die Zellengröße ist abhängig vom dargestellten Inhalt. Bspw. gibt es Inhalt, der mit einer festen Breite definiert ist (Aktionen, Datum, etc...) und Inhalt, der sich prozentual an die Tabellenbreite anpasst (Namen, Textinhalte, etc...). Wie genau sich eine Zelle verhält muss fachlich definiert werden.

Checkbox-/Radio-Button-Spalten

Checkbox- oder Radiobutton-Spalten werden immer am Zeilenbeginn platziert. Dabei bleibt jedoch die darauf folgende Spalte der Rowheader.
Die Beschriftung sowie der Tooltip von Radio-Buttons oder Checkboxen in Tabellen lautet jeweils “[Objektbezeichnung]” und die Objektbezeichnung wird dabei jeweils mit dem Inhalt des Row-Headers (zweite Spalte) der entsprechenden Zeile befüllt (z. B. mit dem Name bei einer Tabelle mit Personen).
Einen Sonderfall bildet die "Alle auswählen"-Checkbox im Spaltenheader: Details zu deren Beschriftung siehe Tabellenheader.
Bei Radiobutton-Spalten erhält jeder Radiobutton mit Tab den Fokus (nicht nur der ausgewählte). Bei Fokuserhalt einer Checkbox- bzw. eines Radiobuttons wird jeweils der Spaltentitel “Auswahl” mit ausgegeben.
Details zur Spaltentitel von Checkbox-/Radiobutton-Spalten siehe Tabellenheader.

Zellen mit mehreren Attributen

Wenn Tabellenzellen Attribute enthalten, die mehr als einen Wert haben können, dann sind folgende zwei Darstellungen möglich:

  • Bei ein oder zwei Werten pro Zelle werden die Werte noch hintereinander ausgeschrieben und mit Semikolon voneinander getrennt. Ab dem dritten Wert wird nur noch der erste davon in der ersten Zeile ausgeschrieben und darunter wird die Anzahl der noch folgenden Einträge im Format “und [Anzahl] weitere” genannt (Beispiel: “AG Lüneburg und 3 weitere”). Falls in Userstories nicht abweichend definiert, wird diese Darstellungsform als Standard verwendet.
  • Werte hintereinander geschrieben und mit Semikolon voneinander getrennt (Beispiel: “2; 3; 6; 12” oder “Montag; Mittwoch; Freitag”). Diese Darstellungsform wird nur empfohlen, wenn jeder Einzelwert aus nicht mehr als 20 Zeichen besteht und wenn die erwartete Gesamtzahl an Attributen 12 Stück nicht übersteigt.

In beiden Fällen muss fachlich festgelegt werden, in welcher Reihenfolge die Werte in der Tabellenzelle angezeigt werden sollen bzw. welcher Eintrag der erste und damit ausgeschriebene ist. Falls nicht abweichend definiert, werden die Werte in der Reihenfolge angezeigt, in der sie auch im Detailformular gelistet sind. Der erstgenannte Wert der Zelle bestimmt bei der Sortierung der zugehörigen Tabellenspalte die Position, an der das Objekt in der Tabelle angezeigt wird. Die Verwendung von Zusatzbadges (Details siehe oben bei “Zellentyp Badge”) ist in Zellen mehren möglichen Attributen nicht zulässig.

Lange Zelleninhalte

Ist der Text einer Zelle nicht vollständig darstellbar, so wird dieser am Ende mit “...” abgekürzt.

Vom Screenreader wird dennoch bei Fokuserhalt einer Zelle der gesamte Text vorgelesen. Zusätzlich wird bei Maus-Hover oder bei Fokuserhalt der Zelle mit der Tastatur im Tooltip der komplette Eintragstext dargestellt.

Im Fall, dass in einer Zelle mehrere Attribute enthalten sind und diese mit “...” abgekürzt sind, so wird nur der Teil im Tooltip vollständig dargestellt, der vor dem “und [Anzahl] weitere” befindet. Es werden nicht alle Attribute im Tooltip gelistet. Vom Screenreader wird dann ebenfalls nur ausgegeben “[Vollständiges erstes Attribut] und [Anzahl] weitere”.

Im Fall, dass eine Zelle Text/Zahl in einer Zeile und einen Badge in einer zweiten enthält, so enthält der Tooltip “[Vollständiger Text/Zahl] [Badgetext]”. Dieser wird auch vom Screenreader vorgelesen.

Leere Zellen

Ist bei einer Zelle kein Inhalt vorhanden (z.B. weil Attribut kein Pflichtattribut und im Objektformular kein Wert eingetragen wurde), so wird visuell ein Gedankenstrich “–” in Textform in der Zelle angezeigt. Das gilt für Spalten aller Inhaltstypen (Text, Badge, Zahl, Datum usw.). Vom Screenreader wird statt des Gedankenstrichs das Wort “leer” bei Fokuserhalt dieser Zelle ausgegeben.

In Sonderfällen können, wenn fachlich sinnvoll Zellen, welche den Wert “–” enthalten grau hinterlegt sein.

Standard-Aktionsbuttons

Standard-Aktionsbuttons, die innerhalb von Tabellen vorkommen und deren visuelle Tooltips: 

TYP 1:

  • Stift-Symbol: “Bearbeiten”
  • Mülltonnen-Symbol: “Löschen” (kann nur bei Hauptobjekten vorkommen)
  • Minus-Symbol: “Entfernen”, kann nur bei Unterobjekten vorkommen
  • Auge-Symbol: “Anzeigen”
  • Zwei-Dokumente-Symbol: “Duplizieren”
  • Uhr-Symbol: “Ladungszeit bearbeiten”

Die Reihenfolge der hier genannten Aktionen entspricht auch der Anzeigereihenfolge, falls mehrere dieser Buttons vorkommen. 

Wenn diese Aktionen im Pop-Up-Menü dargestellt werden (entweder in einem Formularheader, oder weil die Aktionsspalte der Tabelle mehr als 2 Aktionen enthält), wird auch im Menü das jeweilige Icon mit angezeigt.

TYP 2:

  • 3-Punkt-Symbol: “Weitere Aktionen”
  • Info-Symbol: “Weitere Informationen”

Verhalten der Hervorhebung von Tabellenzeilen

Um eine Tabellenzeile besonders hervorzuheben, kann der Status, der z. B. als Badge in einer Tabellenzelle angezeigt wird zusätzlich in Form eines Highlight-Streifens am linken Rand der Zeile 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 Hauptinformation 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.

Sonderfall “Verfahrenssperre”

Der Status-Badge wird vor der primären Information (Aktenzeichen) platziert und wird auch vorher ausgelesen. Der Verfahrenssperre-Badge ändert jedoch nichts daran, dass sich das Element anhand seiner Primären Bezeichnung [Aktenzeichen] in die alphabetische Sortierung einfügt. 

Verfahren mit Sperre können in der Regel nicht geöffnet werden und werden, das Aktenzeichen wird daher als reiner Text dargestellt. Falls der Nutzer von der Sperre ausgenommen ist, wird das Aktenzeichen jedoch als Link dargestellt. Alle anderen Zellen bei einem solchen Verfahren sind mit “–” befüllt, da zu einem gesperrten Verfahren keine Informationen außer dem Aktenzeichen angezeigt werden dürfen.

Verhalten Tabellentrenner

Zur weiteren Untergliederung von Tabellen können Trennblöcke eingezogen werden. Diese erstrecken sich über die komplette Breite der Tabelle (über alle Spalten) und unterteilen die Tabelle in der Vertikalen.

Beispiele: 

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

Jeder Trennblock ist folgendermaßen betitelt: “[Trennparameter] ([Anzahl] Einträge)”. Dabei wird nur die Anzahl an Einträgen des jeweiligen Blocks genannt. Falls die Anzahl genau 1 ist, wird statt “Einträge” das Wort “Eintrag” verwendet. 

Die Trennblöcke sind als Überschriften ausgezeichnet. Die Hierarchiestufe ist je nach Seitenkontext von Designern festzulegen.

Trennblöcke sind nur dann zu verwenden, wenn die Kategorien fix sind und ein Eintrag nicht gleichzeitig mehreren Trennblöcken angehören kann. Bei Sortierung der Tabelle 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 Tabelle stehenden Text “[Anzahl] Einträge” werden nur die wirklichen Tabelleneinträge gezählt. Die Zwischensektionen (Kategorien) sind zwar Teil der Tabelle, werden aber nicht mitgezählt.

Paginierung

Wenn die Tabelle 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 Tabellentrenner).

Verhalten beim Scrollen

Beim Scrollen der Tabelle bleibt der Trennblock, zu dem der oberste sichtbare Eintrag gehört, sticky unter dem Tabellenheader stehen. Bei Erreichen des nächsten Blocks, wird dieser dann aus dem sichtbaren Bereich herausgeschoben und durch den folgenden Trennblock ersetzt.

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

Beispiel für Scrolling-Verhalten: 

https://camo.githubusercontent.com/f13f3d18be3a7e9392e115bd3c04531e9be4a1d6/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f534730426f795a5942504f6d67523367624c2f67697068792e676966

Verhalten von vertikalen Trennlinien in Tabellen

Zur weiteren visuellen Unterteilung von Tabellen können, falls fachlich gewünscht, vertikale Trennlinien zwischen Tabellenspalten eingezogen werden. Diese werden, falls vorhanden, durch alle vorhandenen Tabellenzeilen und den Tabellen-Header durchgezogen.

Eine Trennlinie darf nie als alleiniges informationstragendes Medium eingesetzt werden. Der Kontext der Zusammengehörigkeit von Tabellenspalten muss immer auch über den Spaltentitel erkennbar sein. Insgesamt sollten 
die Trennlinien wenn möglich sparsam eingesetzt werden. Von Screanreadern werden Trennlinien nicht ausgelesen.

Anwendungsbeispiel: Bei der Anzeige laufender Verteilungen eines GVP wird immer vor der Summenspalte eine Linie eingezogen.

Wenn ein Trennblock keine Einträge enhä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 stattdessen komplett ausgeblendet werden, so kann dies in Userstories beschrieben werden.

Der Tabellenfooter erscheint, wenn eine Paginierung benötigt wird, weil die Tabelle zu viele Zeilen beinhaltet.

Der Tabellenfooter ist im Regelfall sticky und somit (sofern vorhanden) immer am Ende des Tabellenbereichs sichtbar. Ab einer Tabellenhöhe unter 400px ist die Paginierungsfußzeile nicht mehr sticky, scrollt mit der Gesamttabelle mit und ist unter dem jeweils letzten Tabelleneintrag positioniert.

Details siehe Paginierung.

Verhalten Read-Only Tabellen (nur Lese-, keine Bearbeitungsrechte)

Falls eine Person nur lesend auf eine gewisse Seite oder ein Unterobjekt zugreifen kann und keine Schreib-Berechtigungen vorliegen, so können in Tabellen andere oder keine Funktionalitäten verfügbar sein.

Der Grundaufbau von Tabellen im Read-Only-Zustand bleibt gleich.

Falls die Tabelle eine Aktionsspalte enthält, bleibt diese ebenfalls sichtbar, nur werden alle Aktionen innerhalb, für die keine Berechtigung vorliegt, deaktiviert dargestellt. 

Ausnahme: Enthält die Aktionsspalte den Button “Bearbeiten” (Stift-Icon), so wird dieser durch den Button “Anzeigen” (Auge-Icon) ersetzt.

Enthält die Aktionsspalte der Tabelle einen Button “Weitere Aktionen” (Drei-Punkte-Icon), so wird dieser dann deaktiviert dargestellt, wenn er nur deaktivierte Einträge enthält (siehe Pop-Up-Menü).

Enthält die Tabelle eine Spalte mit Radio-Buttons bzw. Checkboxen, so werden diese in der Leseansicht dargestellt und sind nicht bearbeitbar.

Standardmäßig bleiben Links in Tabellen klickbar und Tabelleninhalte können weiterhin über den Tabellenkopf beliebig sortiert werden (sofern Sortierbarkeit im Schreib-Modus vorgesehen). Falls ein abweichendes Verhalten gewünscht ist, ist dies in Userstories zu definieren.

Deaktivierte vs. ausgeblendete Aktionen

Können Objekte nicht mehr durch eine Nutzeraktion bearbeitet werden (Beispiele: GVPs, welche sich bereits im Status “In Verwendung” befinden; Formulare in Verfahren, welche bereits den Status “Weggelegt” haben), so werden die nicht mehr ausführbaren Buttons in der Tabellen-Aktionsspalte komplett ausgeblendet, statt nur deaktiviert.

Wenn Objekte generell editierbar sind, nur der Nutzer keine Bearbeitungsrechte dafür besitzt, werden die Buttons deaktiviert angezeigt.

Verhalten bei Tabellen mit Pflichteingaben

Wenn Tabellen innerhalb von Formularen verwendet werden, so können sie Pflichteingaben enthalten. 

Die Tabellenüberschrift (Subhead) wird in diesem Fall ausgezeichnet mit einem Pflichtfeld-Sternchen ( *) am Ende. Außerdem muss unter der Tabellenüberschrift ein Hinweistext Typ 3 platziert sein, welcher genau beschreibt, was für eine Eingabe erforderlich ist. Beispiele: 

  • “Hinweis: Auswahl mindestens eines Fachbereichs erforderlich.” (GRVW)
  • “Hinweis: Anlage von mindestens zwei Beteiligtenrollen erforderlich.” (PERS)
  • “Hinweis: Mindestens zwei Personen von Sperre auszunehmen.” (VFVW)

Nach Ausführen der primären Aktion im Formular Footer (z. B. Anlegen/Speichern) wird validiert, ob die Pflichtangaben erfüllt sind. Falls nicht, erscheint ein Meldungsbanner und ein fokussierbarer Fehlertext, welcher genau die Fehlerursache und die zu seiner Behebung erforderlichen Schritte beschreibt, zwischen Hinweistext und Tabelle (siehe Globale Meldungsregeln: Formular-Validierungsfehler).

Bei Fehlermeldungen sind die globalen Formulierungsregeln für Meldungen zu beachten. (siehe Globale Meldungsregeln: Formulierungsregeln).

Verhalten bei Tabellen mit fehlerhaften Unterelementen

Bei Tabellen in Formularen können Tabelleneinträge als fehlerhaft markiert sein. 
Die Markierung taucht auf, sobald bei Validierungen im Hauptformular Fehler in Unterobjekten festgestellt werden. Dabei wird das Icon immer nur am Rowheader ergänzt – es kann also nicht mehrmals pro Zeile vorkommen. (Details zur Markierung siehe oben Verhalten von Tabellenzeilen/-inhalten)

Zusätzlich wird über der Tabelle eine formularfeldunabhängige Validierungsfehlermeldung pro in der Tabelle enthaltenem fehlerhaftem Objekt angezeigt. 
(siehe Globale Meldungsregeln: Formular-Validierungsfehler)

Verhalten bei Durchsuchen und Filtern von Tabelleninhalten

Über Suche (siehe Suchfeld) und Filter (siehe Filter: Filterreihe) können die Inhalte von Tabellen 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 Tabelle und der Text “[Anzahl] Einträge” wird nach jeder Änderung entsprechend aktualisiert.

Suchergebnisanzeige in Tabellen

Über das, über der Tabelle, liegende Suchfeld können die Inhalte der Tabelle 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 Tabelle auf diesen Wert hin gefiltert. Tabelleneinträ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) in der ersten Tabellenzeile angezeigt, bis Suchergebnisse vorhanden sind. Der Alternativtext des Symbols, der vom Screenreader ausgegeben wird lautet “Ergebnisse werden geladen”. Das Ladesymbol wird vom Screenreader automatisch ausgegeben, ohne das der Systemfokus auf die Grafik gezogen wird.

Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Einträge”. Außerdem wird der darunterliegende Text “[Anzahl] Einträge” entsprechend aktualisiert.

Filterergebnisanzeige in Tabellen

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

Wird ein existierender Filter geändert, gelöscht oder ein neuer hinzugefügt, so wird der Inhalt der Tabelle auf diesen Wert hin gefiltert. Tabelleneinträ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 Treffer länger dauert, wird ein Ladezustand (loading spinner) in der ersten Tabellenzeile angezeigt, bis Suchergebnisse vorhanden sind. Der Alternativtext des Symbols, der vom Screenreader ausgegeben wird lautet “Ergebnisse werden geladen”. Das Ladesymbol wird vom Screenreader automatisch ausgegeben werden, ohne das der Systemfokus auf die Grafik gezogen wird.

Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Treffer gefunden”. Außerdem wird der darunterliegende Text “[Anzahl] Einträge” entsprechend aktualisiert.

Verhalten Bestätigungsbanner

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

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

Verhalten Mehrfachauswahl-Fußzeile

Sind bei einer Tabelle/Liste/Baumstruktur mit Auswahlboxen ein oder mehrerer Einträge selektierbar (mit Checkboxen am Element), so ist eine Mehrfachauswahl-Fußzeile unter dem Element bzw. sticky am unteren Bildschirmrand sichtbar. Dieser gibt die Anzahl der aktuell ausgewählten Elemente an und enthält verschiedene Aktionsbuttons. Der Inhalt der Aktionsbuttons ist je nach fachlicher Anforderung zu definieren. Solang noch kein Element ausgewählt ist, sind alle Buttons als “disabled” dargestellt.

Ausnahme

Falls eine Tabelle mit Checkbox-Spalte Teil eines Formulars ist, dann muss nicht zwingend ein Mehrfach-Auswahlfooter vorkommen, wenn die Auswahl auschließlich durch die primäre Aktion im Formularfooter abgeschlossen wird. Beispiel: Nutzer muss Fachbereiche in einer Tabelle im Formular selektieren und am Formularende auf “Speichern” drücken, um die Auswahl zu übernehmen.

In der Tab-Reihenfolge befindet sich der Footer immer unterhalb der Tabelle/Liste/Baumstruktur.

Der Footer setzt sich zusammen aus:

  • Anzahl ausgewählter Elemente: Beispiele:
    • “1 Element ausgewählt”
    • “4 Elemente ausgewählt”
  • Tertitärer Button “Auswahl aufheben”: Ausführen der aktion setzt alle bereits ausgewählten Elemente auf “nicht selektiert” zurück
  • Aktionsbuttons (0-n): Diese sollten als Liste umgesetzt sein. Je nach Häufigkeit der genutzten Funktionen können primäre oder sekundäre Buttons verwendet werden. Die Primäre und erwartungsgemäß am häufigsten auszuführende Aktion ist ganz rechts anzuordnen (nach links absteigend). Auf Datenübersichts-Hauptseiten muss der Mehrfachselektions-Footer mindestens eine Aktion enthalten - innerhalb von Formularen ist auch ein Footer ohne Aktionsbutton möglich, da die Aktion vom primären Button im Formularfooter abgedeckt werden kann.

Falls die Mehrfachauswahl auf dem jeweiligen Screen eine vorraussichtlich häufig von Nutzern ausgeführte Aktion ist, sind die Checkboxen in der Tabelle/Liste/Baumstruktur sowie der dazugehörige Footer mit Aktionsbuttons standardmäßig sichtbar. Falls dies nicht der Fall ist und die Mehrfachauswahl-Funktion vorraussichtlich selten verwendet wird, dann kann die Checkbox-Spalte auf Wunsch manuell von Nutzenden hinzugefügt werden. Dies geschieht durch Ausführen der Aktion “Mehrfachauswahl aktivieren” über das Einstellungs-Pop-Up-Menü über der Tabelle (siehe Verhalten der Funktion “Tabellen-Einstellungen”). Nach Ausführen der Aktion wird der Aktionsbutton im Pop-up-Menü umbenannt in “Mehrfachselektion deaktivieren”.
Mit Aktivieren der Mehrfachselektion wird auch der Mehrfachauswahl-Footer eingeblendet (Animation: Einfahren von unten). Solange noch kein Eintrag ausgewählt ist, zeigt der Zähler “0 Einträge ausgewählt” und alle Buttons befinden sich im Zustang “disabled”.

Falls vor Aktivieren der Mehrfachauswahl bereits Radio-Buttons in der ersten Tabellenspalte zu sehen waren, wird diese durch Aktivieren der Mehrfachauswahl durch die Checkbox-Spalte ersetzt.

Verhalten beim Scrollen der Seite

Fall 1 Tabellen-/Listen-/Baum-Screen auf grauem Hintergrund:

  • Bei Fensterhöhen über 520 Pixeln: Wenn die Mehrfachauswahl in der Tabelle aktiv ist, so erscheint der Mehrfachauswahl-Footer sticky am unteren Bildschirmrand, sobald sich die Tabelle im View-Port des Nutzers befindet. Der Footer erstreckt sich über die komplette Fensterbreite. Animation bei Erscheinen (wenn Mehrfachauswahl-Funktion aktiviert wird oder wenn Nutzer die Tabelle in der Viewport scrollen): Einfahren von unten. Animation bei Verschwinden (wenn Mehrfachauswahl-Funktion deaktiviert wurde oder wenn Tabelle aus dem Viewport gescrollt wird): Ausfahren nach unten.
  • Sobald eine Fensterhöhe von 520 Pixeln unterschritten wird, ist der Footer nicht mehr sticky und ist mit einem Abstand von 48 Pixeln unterhalb der Tabelle platziert.

Fall 2: Mehrfachauswahl innerhalb eines Formulares (Tabelle/Liste/Baumstruktur auf weißem Grund):

  • In diesem Fall wird der Footer immer mit Null Pixel Abstand unterhalb des Elements dargestellt und ist nicht sticky. Er erstreckt sich über die gesamte Breite der Tabelle.

Responsives Verhalten

Welche Spalten eine fest definierte Breite haben (Bspw. Spalten, die immer relativ kurz sind und nicht viel Platz brauchen) und welche sich prozentual verhalten muss für jede Tabelle fachlich definiert werden.
Standardmäßig hat nur die Aktionsspalte eine feste Breite, die von den jeweiligen Aktionen definiert wird.

Bei Mangel an Platz werden zuerst Aktionen zu einem Pop-Up Menü zusammengefasst. 

Als nächster Schritt wird die Tabelle horizontal scrollbar. Die Scrollbar befindet sich sticky an der unteren Kante der Tabelle, sodass Spaltentitel und Scrollbar immer gleichzeitig sichtbar sind. Die Tabelle muss auch mit der Tastatur scrollbar sein.

In einem späteren Release wird definiert, ob und wie sich Spalten sticky verhalten können (Bspw. Row-Header, Aktionen).

Responsives Verhalten von Mehrfachauswahl-Fußzeilen

Zwischen den beiden Elementen “[Anzahl] Eintrag/Einträge ausgewählt” + “Auswahl aufheben”-Button und der Zeile mit Aktionsbuttons muss ein Abstand von mindestens 24px bestehen bleiben. 

  • Sobald bei kleiner werdenden Fensterbreiten, nicht mehr alle Aktionsbuttons nebeneinander dargestellt werden können, werden die nicht mehr darstellbaren Buttons (von links) in einem Button mit der Beschriftung “Weitere Aktionen” zusammengefasst. Klick auf diesen Button öffnet ein Pop-Up-Menü, welches alle ausgeblendeten Funktionen enthält.
  • Sobald der primäre Aktionsbutton und der “Weitere Aktionen”-Button nicht mehr nebeneinander dargestellt werden können, wird der Text “[Anzahl] Eintrag ausgewählt” umgebrochen und aus dem Button “Auswahl aufheben” wird ein reiner Icon-Button ohne Text. Außerdem wird der Footer dann von 94 Pixel auf 72 Pixel Höhe reduziert.
  • Sobald auch in dieser reduzierten Version der primäre Aktionsbutton und der “Weitere Aktionen”-Button nicht mehr nebeneinander dargestellt werden können, werden diese zu einem einzigen Button mit der Beschriftung “Aktionen” zusammengefasst. Klick auf diesen Öffnet ein Pop-Up-Menü, welches alle Einträge der Aktionsbuttons enthält.
  • Bei Fensterbreitem unter 340 Pixel wird der Icon-Button “Auswahl aufheben” nicht mehr im Footer dargestellt und ist stattdessen ebenfalls im Aktionen-Button-Pop-Up-Menü gelistet. Sind keine Aktionsbuttons im Footer vorhanden, so bleibt der “Auswahl aufheben”-Button unter dem Text “X Einträge ausgewählt” mit Tet und Icon stehen.

Zustände

Barrierefreiheit

Ladezustand von Tabellen

Screenreaderausgabe: Der Alternativtext des Ladesymbols lautet “Tabelle 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 Tabelleninhalte noch nicht vollständig geladen sind.
Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Tabelle wird geladen” ausgelesen, unabhängig davon, wo sich der Fokus auf der Seite zu der Zeit befindet. 

Nach vollständigem Laden der Tabelleninhalte wird der Text “Suche, Filter, Tabelleneinstellungen 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.

Tabellenzeilen / Inhalt

Der Screenreader gibt bei Navigation durch die Zellen nur den jeweiligen Spaltentitel aus, ohne das Attribut der Sortierung.

Ist der Text einer Zelle nicht vollständig darstellbar, so wird dieser am Ende mit “...” abgekürzt. Vom Screenreader wird dennoch bei Fokuserhalt einer Zelle der gesamte Text vorgelesen. Zusätzlich wird bei Maus-Hover oder bei Fokuserhalt der Zelle mit der Tastatur im Tooltip der komplette Eintragstext dargestellt. 

Im Fall, dass in einer Zelle mehrere Attribute enthalten sind und diese mit “...” abgekürzt sind, so wird nur der Teil im Tooltip vollständig dargestellt, der vor dem “und [Anzahl] weitere” befindet. Es werden nicht alle Attribute im Tooltip gelistet. Vom Screenreader wird dann ebenfalls nur ausgegeben “[Vollständiges erstes Attribut] und [Anzahl] weitere”.

Im Fall, dass eine Zelle Text/Zahl in einer Zeile und einen Badge in einer zweiten enthält, so enthält der Tooltip “[Vollständiger Text/Zahl] [Badgetext]”. Dieser wird auch vom Screenreader vorgelesen.

Tabellenzeilenhervorhebung

Diese Hervorhebung wird vom Screenreader nicht ausgegeben, da das informationstragende Element ein Badge oder sonstiger Inhalt einer Tabellenzelle ist.

Tabelle mit Pflichteingaben

Von Screenreadern wird bei Erreichen der Tabelle mit Tab auch die zugehörige Tabellenüberschrift ausgegeben. Dabei wird das Sternchen als “Eingabe erforderlich” ausgelesen.

Bedienung

Tastaturbedienung

Funktion “Tabllen-Einstellungen”

Für die Bedienung des Modals “Spalten konfigurieren” siehe Auswahlfeld, Mehrfach (Multi Select Picker), Tabelle, Button und Formular: Verhalten von Formular-Footer (Fußzeile).

Ladezustand von Tabellen

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

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

Tabellen-Header

  • Mit Tab-Taste kann eine sortierbare Spaltenüberschrift fokussiert werden. 
  • Nicht sortierbare Spalten werden mit Tab übersprungen
    1. Falls Sortierung in dieser Spalte bereits aktiv: 
      1. Enter- oder Leertaste kehrt die Sortierrichtung der Tabellenspalte um und die Pfeilgrafik ändert sich entsprechend
      2. Erneutes Drücken der Enter- oder Leertaste kehrt die Sortierrichtung der Tabellenspalte erneut um und die Pfeilgrafik ändert sich entsprechend
    2. Falls vorher keine Sortierung in der Spalte vorlag:
      1. Durch Drücken der Enter- oder Leertaste wird die aufsteigende Sortierung in dieser Spalte ausgeführt (Pfeil erscheint) und die Sortierung der Spalte, nach der vorher sortiert war, wird aufgehoben (Pfeilgrafik am entsprechenden Spaltentitel verschwindet)
      2. Durch erneutes Drücken der Enter- oder Leertaste wird die Sortierung in der selektierten Spalte umgekehrt. 
      3. Erneuter Tab wechselt zur nächsten Spaltenüberschrift, oder bei letzter Spaltenüberschrift zum nächsten interaktiven Element
  • In Beiden Fällen bleibt der Fokus auf der selektierten Spaltenüberschrift.
  • Bedienung der Checkbox siehe Checkbox
  • Mit den Pfeiltasten (oben, unten, rechts, links) wird der Fokus auf die jeweils nächste Zelle in der entsprechenden Richtung gesetzt ("inklusive Tabellenzeilen/Inhalt"). Ist das Ende erreicht, bleibt der Fokus auf der Zelle, auch wenn die Pfeiltaste erneut in die entsprechende Richtung gedrückt wird.

Tabellenzeilen / Inhalt

  • Tab fokussiert das erste interaktive Element der Tabelle
  • Mit erneutem Tab springt der Fokus jeweils zum nächsten interaktiven Elemente.
  • Mit den Pfeiltasten (oben, unten, rechts, links) wechselt der Fokus auf die jeweilige nächste Zelle (Inklusive Tabellenheader) in der in der entsprechenden Richtung. Ist das Ende erreicht bleibt der Fokus auf der Zelle, auch wenn die Pfeiltaste erneut in die entsprechende Richtung gedrückt wird. 
  • Wenn sich interaktive Elemente in der Zelle befinden wird das nächste in der jeweiligen Navigationsrichtung fokussiert, also von links kommend das erste und rechts kommend das letzte
  • Wenn bei mehreren interaktiven Elementen mit den Pfeiltasten nach oben oder unten navigiert wird, erhält das der Reihenfolge entsprechende Element den Fokus. Bspw. bei fokussiertem zweiten Element, wird auch das zweite Element der darunterliegenden Zelle fokussiert.
  • Mehrere interaktive Elemente innerhalb einer Zelle können mit Tab und Pfeiltasten navigiert werden
  • Aktionen werden entsprechend der Standardefinition des jeweiligen Elements ausgeführt.
  • Durch Drücken der Home-Taste bei fokussiertem Element innerhalb der Tabelle springt der Tastaturfokus auf die erste Zelle des ersten Tabelleneintrags (falls vorhanden). Ein Wechsel auf andere Tabellen-Seiten (falls paginiert) findet nicht statt. Wenn die Tabelle Leer ist, passiert durch Drücken der Home-Taste auch bei fokussiertem Leer-Element nichts.
  • Durch Drücken der Ende-Taste bei fokussiertem Element innerhalb der Tabelle springt der Tastaturfokus auf den letzten Tabelleneintrag auf der aktuellen geöffneten Seite der Tabelle (falls paginiert). Wenn die Tabelle Leer ist, passiert durch Drücken der Ende-Taste auch bei fokussiertem Leer-Element nichts.

Für die Tastaturbedienung von Standard-Aktionsbuttons in Tabellen siehe Button.

Mit Tabellenzeilenhervorhebungen und Tabellentrennlinien kann nicht interagiert werden.

Für die Tastaturbedienung von Tabellen-Footern mit Paginierung siehe Paginierung.

Für die Tastaturbedienung von Tabellen mit Pflichteingaben siehe oben Verhalten von Tabellenzeilen/-inhalten und siehe Globale Meldungsregeln: Formular-Validierungsfehler.

Für die Tastaturbedienung der Suchergebnisnazeige siehe Suchfeld.

Für die Tastaturbedienung der Filterergebnisnazeige siehe Filter: Filterreihe und Filter-Container.

Tabellen mit fehlerhaften Unterelementen

Bestätigungsbanner

Siehe Erfolgsmeldungen (Synchrone Meldungen).

Mehrfachauswahl-Fußzeile

  • Mit der Tab Taste kann der “Auswahl aufheben”-Button fokussiert werden. 
  • Erneutes Drücken der Tab-Taste setzt den Fokus auf den primären Aktionsbutton (ganz rechts).
  • Erneutes Drücken der Tab-Taste wechselt zum nächsten Aktionsbuttons links davon (und so weiter von rechts nach links).
  • Inaktive/Disabled Buttons werden dabei übersprungen und sind nicht fokussierbar.
  • Enter oder Leertaste bei fokussiertem “Auswahl aufheben”-Button führt die Aktion aus, die Selektion aller Checkboxen wird entfernt, alle Buttons im Mehrfachauswahl-Footer wechseln in den Zustand “disabled” und der Fokus befindet sich anschließend auf dem ersten Eintrag der gerade geöffneten Tabelle/Liste/Baumstruktur.
  • Enter oder Leertaste bei fokussierten anderen Aktionsbuttons im Footer, führt die jeweilige Aktion aus. 
    • Falls die Aktion mehrfach ausgeführt werden kann, so bleibt der Tastaturfokus nach Ausführen der Aktion auf dem jeweiligen Button. 
    • Falls der Button durch Ausführen der Aktion in den disabled-Zustand wechselt, wird der nächste Button fokussiert. 
    • Falls es sich um den letzten Button gehandelt hat der vorherige. 
    • Falls alle Buttons im Footer in den Status “disabled” wechseln, dann sollte der Fokus auf den ersten Eintrag des Elements (Tabelle/Liste usw.) gesetzt werden.
    • Falls durch das Ausführen der Aktion ein neues Formular/Modal geöffnet wird, so befindet sich der Tastaturfokus anschließend im ersten Formularfeld des Formulars/Modals.
  • Je nach fachlicher Anforderung ist zu entscheiden, ob nach Ausführen einer Aktion die ausgewählten Checkboxen auf “nicht selektiert” zurückgesetzt werden.
  • Wenn ein oder mehrere Objekte gelöscht werden, erscheint eine Sicherheitsabfrage. (Tastaturbedienung siehe Modaldialog) Nach Bestätigen der Sicherheitsabfrage werden die Elemente gelöscht und der Tastaturfokus wird auf den ersten Eintrag der Tabelle/Liste/Baumstruktur gesetzt.
  • Für Verhalten des “Mehr Aktionen” Buttons (bei kleinen Screenbreiten) siehe Pop-Up-Menü.

Mausbedienung

Funktion “Tabllen-Einstellungen”

Für die Bedienung des Modals “Spalten konfigurieren” siehe Auswahlfeld, Mehrfach (Multi Select Picker), Tabelle, Button und Formular: Verhalten von Formular-Footer (Fußzeile).

Klick mit linker Maustaste fokussiert den Ladezustand von Tabellen.

Klick mit linker Maustaste fokussiert den Leer-Eintrag von Tabellen.

Tabellen-Header

  1. Falls Sortierung in dieser Spalte bereits aktiv: 
    1. Klick mit linker Maustaste auf die Spaltenüberschrift kehrt die Sortierrichtung der Tabellenspalte um und die Pfeilgrafik ändert sich entsprechend
    2. Ein erneuter Klick mit linker Maustaste kehrt die Sortierrichtung der Tabellenspalte erneut um und die Pfeilgrafik ändert sich entsprechend
  2. Falls vorher keine Sortierung in der Spalte vorlag:
    1. Durch Klick mit linker Maustaste wird die aufsteigende Sortierung in dieser Spalte ausgeführt (Pfeil erscheint) und die Sortierung der Spalte, nach der vorher sortiert war, wird aufgehoben (Pfeilgrafik am entsprechenden Spaltentitel verschwindet)
    2. Durch erneutes Klicken mit linker Maustaste wird die Sortierung in der selektierten Spalte umgekehrt. 
    3. Bedienung der Checkbox siehe Checkbox

Linksklick auf ein interaktives Tabellenzeilen-/Inhaltselement führt die Aktion aus.

Für die Mausbedienung von Standard-Aktionsbuttons in Tabellen siehe Button.

Mit Tabellenzeilenhervorhebungen und Tabellentrennlinien kann nicht interagiert werden.

Für die Mausbedienung von Tabellen-Footern mit Paginierung siehe Paginierung.

Für die Tastaturbedienung von Tabellen mit Pflichteingaben oben Verhalten von Tabellenzeilen/-inhalten und Globale Meldungsregeln: Formular-Validierungsfehler.

Für die Mausbedienung der Suchergebnisnazeige siehe Suchfeld.

Für die Mausbedienung der Filterergebnisnazeige siehe Element Filter: Filterreihe und Filter-Container.

Tabellen mit fehlerhaften Unterelementen

Bestätigungsbanner

Siehe Erfolgsmeldungen (Synchrone Meldungen).

Mehrfachauswahl-Fußzeile

  • Klick mit linker Maustaste auf einen aktiven Button führt die Aktion aus. 
  • Klick mit linker Maustaste auf den “Auswahl aufheben”-Button führt die Aktion aus, die Selektion aller Checkboxen wird entfernt, alle Buttons im Mehrfachauswahl-Footer wechseln in den Zustand “disabled” und der Fokus befindet sich anschließend auf dem ersten Eintrag der gerade geöffneten Tabelle/Liste/Baumstruktur.
  • Klick mit linker Maustaste auf einen anderen Aktionsbutton im Footer führt die jeweilige Aktion aus. 
    • Falls die Aktion mehrfach ausgeführt werden kann, so bleibt der Tastaturfokus nach Ausführen der Aktion auf dem jeweiligen Button. 
    • Falls der Button durch Ausführen der Aktion in den disabled-Zustand wechselt, wird der nächste Button fokussiert. 
    • Falls es sich um den letzten Button gehandelt hat der vorherige. Falls alle Buttons im Footer in den Status “disabled” wechseln, dann sollte der Fokus auf den ersten Eintrag des Elements (Tabelle/Liste usw.) gesetzt werden.
    • Falls durch das Ausführen der Aktion ein neues Formular/Modal geöffnet wird, so befindet sich der Tastaturfokus anschließend im ersten Formularfeld des Formulars/Modals.
  • Je nach fachlicher Anforderung ist zu entscheiden, ob nach Ausführen einer Aktion die ausgewählten Checkboxen auf “nicht selektiert” zurückgesetzt werden.
  • Wenn ein oder mehrere Objekte gelöscht werden, erscheint eine Sicherheitsabfrage. (Mausbedienung siehe Modaldialog) Nach Bestätigen der Sicherheitsabfrage werden die Elemente gelöscht und der Tastaturfokus wird auf den ersten Eintrag der Tabelle/Liste/Baumstruktur gesetzt.
  • Für Verhalten des “Mehr Aktionen” Buttons (bei kleinen Screenbreiten) siehe Pop-Up-Menü.

Weitere Themen: