UI-Justiz

Headerleiste

Die Headerleiste ist die Kopfzeile der Seite, die bei der Navigation hilft.

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

#1792

Aufbau

Die Headerleiste befindet sich horizontal und sticky am oberen Fensterrand und muss für Screenreader als Header-Bereich definiert werden. Sie enthält folgende Elemente:

  1. Hauptmenü-Button (Dieser ist als Region mit dem Landmark “Navigation” und der Beschriftung “Hauptmenü” gekennzeichnet).
  2. Name der Justizbehörde
  3. 1-n weitere Menü-Buttons (Die Buttongruppe ist als Region mit dem Landmark “Navigation” und der Beschriftung “Schnellaktionen” gekennzeichnet).

Verhalten

Behördenname

Mittig wird der Namen der Justizbehörde angezeigt, mit der der Nutzer eingeloggt ist. Falls vorhanden kann für den Behördennamen eine Kurzbezeichnung verwendet werden. 

Beispiel: “LG Schweinfurt Ausw.StVk b.d. AG Bad Neustadt” (statt “Landgericht Schweinfurt Auswärtige Strafvollstreckungskammer b.d. Amtsgericht Bad Neustadt”).

Während der Behördenname noch geladen wird, wird an Stelle des Namens eine Ladeanimation angezeigt. Diese ist nicht fokussierbar, trägt aber den Alternativtext “Behördenname wird geladen”, welcher bei Mouse-Hover auch als Tooltip angezeigt wird.

Bei den Bereichen Kalender und Meldungen kann ein Hinweis über aktuelle Änderungen angezeigt werden, (Bspw. ungelesene Meldungen). Dieser Hinweis ist ein Punkt auf dem jeweiligen Menü-Element. Dieser Hinweis verschwindet, sobald Nutzende den jeweiligen Bereich geöffnet und sich mit den Änderungen beschäftigt haben (Bspw. die neuen Meldungen gelesen haben).

Responsive Headerleiste

Die Headerzeile hat links und rechts jeweils fest definierte Elemente (Menü-Button linksbündig zur Headerleiste, restliche Funktionen rechtsbündig zur Headerleiste). Im Bereich dazwischen wird bei ausreichend Platz die Justizbehördenbezeichnung angezeigt.

Der Name der Justizbehörde ist bei großen Fensterbreiten (über 880 Pixel) zentriert zum Fenster im Header ausgerichtet. Er kann maximal 432 Pixel (bzw. 56 Zeichen) breit werden. Ist der Behördenname länger, so wird dieser am Ende mit “...” abgekürzt. Ein Zeilenumbruch findet nicht statt. Bei Mouse-Hover kann, falls abgekürzt ein Tooltip mit der kompletten Behördenbezeichnung angezeigt werden.

Ist die Headerleiste unter 880 Pixel breit, so wird der Behördenname zentriert zwischen dem Hauptmenü-Button und dem ersten der Buttons auf der rechten Seite ausgerichtet (nicht mehr zentriert zur Fensterbreite). Dabei wird rechts und links ein Abstand zu den Buttons von je 24 Pixel eingehalten. Der Text-Rahmen wird bei kleiner werdender Fensterbreite ensprechend schmaler und der nicht mehr darstellbare Rest des Behördentitels wird mit “...” abgekürzt.

Ab einer Fensterbreite unter 480px wird der Name der Justizbehörde ausgeblendet und ist nur noch im Hauptmenü sichtbar.

Zustände

Barrierefreiheit

Die interaktiven Icon-Elemente ermöglichen es, weitere Unterbereiche der Applikation einzublenden. Alle diese Unterbereiche (siehe Overlaymenü) werden nach Erscheinen an der Unterkante der Headerleiste angezeigt. Die Icon-Buttons müssen aussagekräftige Titel haben:

  1. “Hauptmenü”
  2. “Suche”
  3. “Kalender”
  4. “Meldungen”
  5. “[Name eingeloggte Person]”
  6. “Profil”
  7. “Hilfe”

Die Menüelemente werden als tertiäre Icon-Buttons umgesetzt, geöffnete Menü-Elemente müssen dabei mit einem Status gekennzeichnet sein, der es bei Screenreaderausgabe ermöglicht, diese als geöffnet wahrzunehmen.

Punkt auf dem Menü-Element

Für die Screenreaderausgabe muss folgende Beschreibung verwendet werden:

  • Kalender + Hinweis: “(X) neue Termine”
  • Meldungen + Hinweis: “(X) neue Meldungen”

Bedienung

Tastaturbedienung

  • Mit Tab werden die interaktiven Elemente erreicht.
  • Enter öffnet das jeweilige Overlay.
  • Der Fokus wechselt auf das für das jeweilige Overlay vordefinierte interaktive Element (siehe Einzel-Definitionen: Overlay-Menüs)
  • Die Esc-Taste oder erneut Enter auf dem geöffneten Icon schließt das Overlay wieder (weitere Schließoptionen siehe Overlay-Menü: Overlay-Menü-Container).

Mausbedienung

  • Linksklick auf ein Menü-Element öffnet das jeweilige Overlay.
  • Der Fokus wechselt auf das für das jeweilige Overlay vordefinierte interaktive Element (siehe Einzel-Definitionen: Overlay-Menüs)
  • Erneuter Klick auf das geöffnete Menü-Element schließt das Overlay wieder (weitere Schließoptionen: siehe Overlay-Menü: Overlay-Menü-Container).

Weitere Themen: