UI-Justiz

Tab

Tabs helfen bei der Navigation zu mehr Informationen ohne, dass Nutzende Seite oder Bereich wechseln müssen.

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

#1190; #2325; 2594

Aufbau

  1. Aktiver Reiter
  2. Default Reiter

Verhalten

Bei Wechsel der Reiter wandert der Ausgewählt-Balken von dem vorherigen zu dem neuen Reiter.

Bei den Tabs im Ergebnisanzeigebereich der erweiterten Suche lautet die Beschriftung der Tabgruppe “Ergebnistyp”.

Allgemein gilt: Beim Wechsel zwischen Tabs erscheinen Sicherheitsabfragen, wenn ungespeicherte Eingaben in einem in der Registerkarte geöffneten Formular vorliegen. Hierfür sind die Standardsicherheitsabfragen inkl. Verhalten und Fokussetzung zu nutzen (siehe Meldungskonzept: Sicherheitsabfragen).

Anzahl und Ladesymbol

Falls der Tab eine Liste, Tabelle oder Baumstruktur mit Elementen enthält, so kann hinter dem Tab-Text die Gesamtzahl der enthaltenen Objekte in Klammern angezeigt werden. Beispiele: 

  • “Beteiligte (15)”
  • “Verfahren (7)”
  • “Termine (2)”

Dauert die Berechnung der Gesamtzahl enthaltener Objekte länger, so wird in dieser Zeit anstatt “([Anzahl])” ein rotierendes Lade-Symbol hinter dem Tab-Text angezeigt.

Tabs (M) - nicht ausreichender Platz

Sollte es nicht genug Platz für alle Reiter geben wird die Tableiste angeschnitten und es erscheinen links und rechts Pfeile zur Navigation.

Ist der erste/letzte Reiter vollständig sichtbar wird der entsprechende Pfeil inaktiv.

Bei Mouse-Hover auf den Pfeilen wird im Tooltip folgendes angezeigt:

  • links: "Nach links scrollen"
  • rechts: "Nach rechts scrollen"

Wird der Pfeil links oder rechts ausgelöst scrolled die Tab-bar so, dass der nächste Reiter vollständig zu sehen ist. 
Gleiches gilt, wenn ein Reiter fokussiert/geklickt wird, der nicht komplett zu sehen ist.

Tabs (S) - Dropdown

Ab einer Elementbreite von 288px oder kleiner wird die Tab-Bar zu einem Dropdown-Element.

Gleiches gilt auch bei Elementen mit einer Breite über 288px wenn einer der Einträge die maximal sichtbare Breite überschreitet.

Sonderfall: Bei den Tabs im Ergebnisanzeigebereich der erweiterten Suche lautet die Beschriftung des Einfachauswahlelements “Auswahl Ergebnistyp”.

Wenn Texttitel im geschlossenen Dropdown zu lang sind werden sie mit “...” abgekürzt. Im geöffneten Dropdown sind die vollständigen Titel zu sehen (Inhalte brechen bei Bedarf um und werden mehrzeilig).

Hinter dem Eintragstext kann jeweils die Gesamt-Element-Anzahl in Klammern mit angegeben werden. Dauert dessen Berechnung länger, so wird in der Zwischenzeit ein Ladesymbol hinter dem Eintragstext im Auswahlfeld angezeigt. Dieses hat den Alternativtext “Anzahl wird berechnet.” Dieser Alternativtext wird nur bei Fokuserhalt des Einfach-Auswahlfeldes vom Screenreader ausgegeben. Ist die Berechnung beendet, während das Einfach-Auswahlfeld fokussiert ist, so wird der gesamte Feld-Inhalt (Tab-Text und Anzahl) erneut ausgelesen. In der Ausklappliste wird während der Berechnung kein Ladesymbol angezeigt. 

Zustände

Barrierefreiheit

Das Lade-Symbol hat den Alternativtext “Anzahl wird berechnet.” Dieser Alternativtext wird nur bei Fokuserhalt des jeweiligen Tabs vom Screenreader ausgegeben. Ist die Berechnung beendet, während der Tab fokussiert ist, so wird der gesamte Tab-Bezeichnung (Tab-Text und Anzahl) erneut ausgelesen.

Bedienung

Tastaturbedienung

  • Wenn das Tab-Element angewählt wird ist der aktive Reiter im Fokus.
  • Nun können mit den Pfeiltasten rechts und links andere Reiter fokussiert werden.
  • Drücken der Home-Taste verschiebt den Fokus auf den ersten Tab.
  • Drücken der End-Taste verschiebt den Fokus auf den letzten Tab.
  • Leertaste oder Enter aktiviert den fokussierten Reiter.
  • Nach Öffnen einer Registerkarte bleibt der Fokus auf dieser.
  • Mit Tab sollte das erste interaktive Element innerhalb der geöffneten Registerkarte angesprungen werden.

Tabs (M) - nicht ausreichender Platz

  • Wenn das Tab-Element angewählt wird ist der aktive Reiter im Fokus.
  • Nun können mit den Pfeiltasten rechts und links andere Reiter fokussiert werden.
  • Leertaste oder Enter aktiviert den fokussierten Reiter.
  • Nach Öffnen einer Registerkarte bleibt der Fokus auf dieser.
  • Mit Tab sollte das erste interaktive Element innerhalb der geöffneten Registerkarte angesprungen werden.
  • Die Pfeile zum Scrollen der Registerkarten erhalten mit Tab keinen Fokus.

Tabs (S) - Dropdown

Mausbedienung

  • Klick mit linker Maustaste aktiviert den jeweiligen Reiter.

Tabs (M) - nicht ausreichender Platz

  • Klick mit linker Maustaste aktiviert den jeweiligen Reiter.
  • Wird ein Pfeil gedrückt scrolled die Tab-bar so, dass der nächste Reiter vollständig zu sehen ist. 
  • Gleiches gilt, wenn ein Reiter geklickt wird, der nicht komplett zu sehen ist.

Tabs (S) - Dropdown