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
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:
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):
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).
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.
Ü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:
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.
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:
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.
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:
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:
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.
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.
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.
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)
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.
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:
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.
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.
Eine Tabellen-Zelle kann folgende Elemente enthalten:
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- 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.
Wenn Tabellenzellen Attribute enthalten, die mehr als einen Wert haben können, dann sind folgende zwei Darstellungen möglich:
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.
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.
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, die innerhalb von Tabellen vorkommen und deren visuelle Tooltips:
TYP 1:
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:
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:
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.
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.
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:
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.
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:
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:
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.
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.
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.
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:
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).
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)
Ü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.
Ü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.
Ü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.
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).
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.
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:
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.
Fall 1 Tabellen-/Listen-/Baum-Screen auf grauem Hintergrund:
Fall 2: Mehrfachauswahl innerhalb eines Formulares (Tabelle/Liste/Baumstruktur auf weißem Grund):
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).
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.
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.
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.
Diese Hervorhebung wird vom Screenreader nicht ausgegeben, da das informationstragende Element ein Badge oder sonstiger Inhalt einer Tabellenzelle ist.
Von Screenreadern wird bei Erreichen der Tabelle mit Tab auch die zugehörige Tabellenüberschrift ausgegeben. Dabei wird das Sternchen als “Eingabe erforderlich” ausgelesen.
Für die Bedienung des Modals “Spalten konfigurieren” siehe Auswahlfeld, Mehrfach (Multi Select Picker), Tabelle, Button und Formular: Verhalten von Formular-Footer (Fußzeile).
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.
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.
Siehe Erfolgsmeldungen (Synchrone Meldungen).
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.
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.
Siehe Erfolgsmeldungen (Synchrone Meldungen).