UI-Justiz

Akkordeons (Zwischensektionen)

Ein- und ausklappbare Sektionen mit Inhalten.

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

#2290

Aufbau

  1. Sektion
  2. Titel der Sektion
  3. Auf-/Zuklappen Funktion
  4. Badges (optional)
  5. Inhaltsbereich

Verhalten

Die Sektionsbezeichnungen sollten möglichst kurz und präzise formuliert sein. Lange Titel sollten vermieden werden, ist dies nicht möglich kann die Sektion auch mehrzeilig dargestellt werden.

Die Sektionstitel sind Überschriften vom Schrifttyp H3. Je nach Seitentyp ist der Sektionstitel aber im Code als “H2” oder “H3” auszuzeichnen (siehe Definition der Seitentypen).

Wenn ein Formular mit Zwischensektionen unterteilt ist, dann müssen alle Formularelemente in Akkordeons platziert sein. Eine Mischform (z.B. Elemente oberhalb des ersten Akkordeons, welche nicht auf-/zuklappbar sind) ist nicht erlaubt.

Standardverhalten der Formular-Akkordeons (abweichendes Verhalten muss in User Stories beschrieben werden):

  • In Neuanlageformularen sind alle Sektionen geöffnet.
  • Beim Öffnen des Detailformulars eines bereits angelegten Elements sind zunächst alle Sektionen bis auf die erste Sektion (enthält in der Regel Grunddaten) geschlossen.
  • Sonderfall, wenn neben dem Formular die Schnellnavigations-Sidebar geöffnet ist: Wird in der Liste in der Schnellnavigations-Sidebar ein anderer Listeneintrag ausgewählt, so sind in dem sich öffnenden Formular die Akkordeons auf- bzw. zugeklappt, die auch in dem zuvor geöffneten Formular geöffnet bzw. geschlossen waren. So können Nutzende schnell Information in bestimmten Formularbereichen vergleichen. Dies gilt nur, wenn ein neuer Listeneintrag mit Leertaste bzw. Einfachklick geöffnet wurde, nicht bei Enter oder Doppelklick (Details siehe Liste: Interaktion bei Listen in der Schnellnavigations-Sidebar).
  • Wird aus einem Kindformular ins Elternformular zurückgekehrt, so sind die Akkordeonzustände im Elternformular identisch mit dem Zustand, in dem sie sich vor Absprung ins Kindformular befunden haben.

Dies kann bei Bedarf später auch eine Nutzereinstellung werden.

Zusätzlich zum Titel kann ein Akkordeon optional auch 1-n Status-Badges beinhalten.

Der Badge-Status im Titel ist nur dann zu verwenden, wenn sich der Status auf den gesamten Akkordeon-Inhalt bezieht.
Enthält das Akkordeon mehrere Objekte mit unterschiedlichem Status, dann ist der Status an der jeweiligen Inhaltsgruppe darzustellen.

Platzhalter im Akkordeon

Wenn ein Akkordeonabschnitt aus fachlichen Gründen noch nicht bearbeitbar ist, wird statt dem eigentlichen Akkordeoninhalt nur ein Platzhaltertext (ohne weitere Inhalte) angezeigt. Sobald der Abschnitt bearbeitbar wird, wird der Platzhaltertext durch den entsprechenden Inhalt ersetzt.
Formulierungsregel: „Hinweis: [Begründung, warum der Abschnitt nicht bearbeitet werden kann]”
Beispiel: „Hinweis: Terminsbesetzung kann erst bearbeitet werden, wenn ein Aktenzeichen ausgewählt wurde.”

Der Platzhaltertext ist fokussierbar. Der Screenreader gibt bei Fokuserhalt den Platzhaltertext aus.

Zustände

Barrierefreiheit

Jedes Akkordeon (inkl. Titel, Badges, Auf-/Zuklappenbutton und Inhaltsbereich) ist als Region mit der Beschriftung “[Akkordeontitel]” ausgezeichnet.

Zusätzlich zum Titel kann ein Akkordeon optional auch 1-n Status-Badges beinhalten. Sie werden mit dem Akkordeontitel von Screenreadern ausgelesen. Ausgabereihenfolge: 1. Titel, 2. Badges. (siehe Badge: Barrierefreiheit). Beispiel für Akkordeon mit Status: Behördenzuordnung eines ehrenamtlichen Richters “Aktiv/Inaktiv”.

Bedienung

Tastaturbedienung

  • Pfeiltasten nach oben/unten wechseln zum nächsten Akkordeon-Eintrag.
  • Tabulatortaste wechselt zum ersten Inhalt des göffneten Akkordeon-Eintrag, (bei geschlossenem Akkordeon-Eintrag zum nächsten Akkordeon-Eintrag)
  • Bei geöffnetem Akkordeon kann mit Tab-Taste der Platzhalter (wenn vorhanden) fokussiert werden. Erneutes Drücken der Tab-Taste bewegt den Fokus zum nächsten interaktiven Element.
  • Enter oder Leertaste öffnet die Sektion (falls geschlossen) oder schließt die Sektion (falls geöffnet).
  • Der Fokus verbleibt auf der aktivierten Sektion.

Mausbedienung

  • Klick mit linker Maustaste auf einen Akkordeonneintrag öffnet diesen (falls er geschlossen ist) oder schließt diesen (falls er geöffnet ist).
  • Klick mit linker Maustaste auf den Platzhalter fokussiert diesen.