1. Meldungstext 1: Kurzbeschreibung der Meldung
2. Meldungstext 2: Detailbeschreibung des Fehlers oder weitere Inhalte der Meldung, bei Bedarf mehrzeilig.
3. Optionales Icon bei manchen Dialogkategorien (48x48px)
4. Dialog-Footer
5. Primäre Aktion
6. Sekundäre Aktion

Modaldialoge stellen sicher, dass die gewünschte Aktion an erster Stelle von Nutzenden bearbeitet wird. Ein gleichzeitiges Ausführen anderer Aktionen ist nicht möglich. Der Hinweis erscheint zentriert in der Fenstermitte. Der Hintergrund wird durch eine halbtransparente Fläche abgedunkelt. Elemente im Hintergrund sind dann nicht mehr mit der Tastatur erreichbar und sind auch mit der Maus nicht mehr bedienbar.

Gleichzeitig mit Erscheinen der Meldungen ertönt je nach Meldungstyp ein akustisches Signal (siehe Akustische Signale). 

Modaldialoge enthalten jeweils: 

• Meldungstext 1: Eine Überschrift mit Kurzbeschreibung der Meldung (visuell H3; im Code als H2 gekennzeichnet)
• Meldunstext 2: Eine bei Bedarf mehrzeilige Detailbeschreibung, die Nutzende über den Grund des Modals und mögliche Konsequenzen (bei Sicherheitsabfragen) bzw. Schritte zur Behebung des Fehlers (bei Fehlermeldungen) informiert. Diese Detailbeschreibung kann Fließtext oder eine Mischung aus Fließtext und Aufzählungen enthalten. Optional können zum Beschreibungstext weiterführende Links ergänzt werden. Abweichend zum Standardverhalten von Links (Öffnen im gleichen Browsertab), müssen sich Links aus Meldungstexten immer in einem separaten Browsertab öffnen, damit der Kontext der Meldung bestehen bleibt und ggf. noch weitere Links im Inhalt der Meldung geöffnet werden können.
• Einen Dialog-Footer (Fußzeile). Dieser enthält mindestens einen primären Aktionsbutton. Bei Bedarf können zusätzliche sekundäre oder tertiäre Buttons erscheinen.

Details zur Formulierung der Meldungstexte für Sicherheitsabfragen und Fehlermeldungen (Modaldialog) siehe Meldungskonzept.

Modaldialoge sind technisch als solche ausgezeichnet. Sie enthalten keine zusätzlichen Regionsauszeichnungen für Header, Footer & Inhaltsbereich.

Abhängig von der Kategorie des Fehlers ist die Hintergrundfarbe des Modals und die Hintergrundabdunklung unterschiedlich gefärbt:

• Sicherheitsabfragen und andere Hinweise = Nachtblau
• Fehler und kritische Systemnachrichten = Rot

Bei “Roten Meldungen” wird zusätzlich ein Ausrufezeichen-Icon in der rechten oberen Ecke angezeigt, um auf die Wichtigkeit hinzuweisen. Die Grafik ist als Layoutgrafik zu deklarieren.

Details zur Formulierung der Meldungstexte für Sicherheitsabfragen und Fehlermeldungen sind im Meldungskonzept zu finden.

Bei Eingabefeldern (Standard-Eingabefelder, aber auch Wertebereich, Datum oder Uhrzeit) wird die Sicherheitsabfrage immer durch die Wertübernahme (Enter oder Verlassen des Feldes) ausgelöst. Bei allen anderen Elementen wird die Sicherheitsabfrage durch die Wertänderung ausgelöst.

Fokussetzung nach Ausführen der Aktionsbuttons:

• Klick auf “Abbrechen” (sekundäre Aktion): Fokus wird nach Schließen der Sicherheitsabfrage wieder auf das Element gesetzt, mit dem der Dialog geöffnet wurde.
• Bei Primäraktionen, die nicht durch die nachfolgend genannten Standardverhalten abgedeckt sind, ist die Fokussetzung in der User Storie zu definieren.

Bei Standard-Sicherheitsabfragen:

• Klick auf Primäraktion “Verwerfen”: Fokussetzung entspricht der Standardfokussetzung des jeweiligen Seitentyps (siehe Seitenaufbau)
• Klick auf Primäraktion “Löschen” oder “Entfernen”: Standardfokussetzung bei Löschen und Entfernen von Objekten (siehe Navigationskonzept innerhalb GeFa: Löschen und Entfernen)
• Klick auf Primäraktion “Verlassen” beim Verlassen eines Formulars im Wizard mit Frontend-/Crossvalidierungsfehlern: Fokussetzung gemäß Ablauf von Validierungen in Wizardprozessen (siehe Geführter Prozess für Neuanlage/Bearbeiten von Objekten (Wizard): Verhalten: Ablauf von Validierungen in Wizardprozessen)

Bei anderen Sicherheitsbfragen:

• Primäre Aktion löscht, entfernt u.ä. Haupt- oder Unterobjekte: Fokussetzung gemäß Standardfokussetzung für Navigationskonzept GeFa: Löschen und Entfernen
• Primäre Aktion ändert Haupt- oder Unterobjekte, fügt diese hinzu, übernimmt sie u.ä.:
• • Sicherheitsabfrage durch Aktion in Formular-Fußzeile ausgelöst: Fokussetzung entspricht der Standardfokussetzung nach Bedienen der Formular-Fußzeile (siehe: Formular: Bedienung - Formular Footer (Fußzeile)
  • Sicherheitsabfrage durch Wertänderung oder Wertübernahme ausgelöst: Fokus wird nach Schließen der Sicherheitsabfrage wieder auf das Element gesetzt, durch das der Dialog geöffnet wurde.

Fehlermeldungen könenn aus unterschiedlichen Gründen ausgelöst werden, die entweder mit den Anwendern oder dem System zusammenhängen.

Für die folgenden Fälle sind die Meldungsinhalte (siehe Meldungskonzept: Fehlermeldungen (Modaldialog) - Standard-Fehlermeldungen) definiert:

• Optimistic Locking: Bearbeiten zwei Personen dasselbe Formular, so werden die Änderungen der Person übernommen, die zuerst speichert.
• Ein Objekt wird von einem anderen Anwender, oder demselben Anwender in einem neuen Tab gelöscht, bevor Änderungen übernommen wurden.
• Versuch des Öffnens eines bereits gelöschten Datensatzes.
• Der Server reagiert nicht.
• Das Umsystem ist nicht erreichbar.

Nutzende müssen das Modal schließen (in der Regel über den primären Button), um fortfahren zu können. In Ausnahmefällen können auch bei diesem Fehlertyp mehrere Aktionen (primär/sekundär) zur Auswahl stehen. Eine gleichzeitige Bearbeitung der im Hintergrund liegenden Seite ist nicht möglich.

Fokussetzung nach Ausführen der Aktionsbuttons kann zwei Standardfälle haben:

• Fall 1, klick auf “Seite neu laden”/”Formular schließen”: der Fokus wird nach neu laden der Seite entsprechend der Standardfokussetzung je nach Seitentyp gesetzt. Dabei springt die Ansicht immer zurück auf die Übersichtsseite. Falls fachlich sinnvoll, können Ausnahmen entstehen, welche in den User Stories definiert werden müssen.
• Ausnahme Fall 1: Klick auf “Seite neu laden” nach Optimistic Locking: Das entsprechende Formular bleibt geöffnet und Fokussetzung gemäß Standardfokussetzung je nach Seitentyp.
• Fall 2, klick auf “Okay”: es passiert keine Navigation und der Fokus wird nach Schließen des Modals wieder auf das Element gesetzt, mit dem der Dialog geöffnet wurde. Falls fachliche sinnvolle Ausnahmen entstehen, müssen diese in den User Stories definiert werden.

Der Modaldialog hat eine Maximalbreite von 540 Pixeln. Bei Bildschirmbreiten unter 604 Pixeln bleibt ein Abstand zum Fensterrand von 32 Pixeln nach rechts und links bestehen und das Modalfenster verkleinert sich mit kleiner werdender Bildschirmbreite. Bei Bildschirmbreiten unter 560 Pixeln nimmt das Formular die komplette Bildschirmbreite ohne Abstand zum Rand ein und ist Bottom-Aligned. Sobald die Höhe des Formulars größer ist als die Bildschirmhöhe, erscheint eine Scrollbar und das Formular ist Top-Aligned.

Sobald der Bildschirm so klein ist, dass Primärer und sekundärer Aktionsbutton nicht mehr nebeneinander dargestellt werden können, wechselt die Ansicht zu “Layout 2” (siehe rechts): Aktionsbuttons werden nun untereinander dargestellt und füllen die gesamte Dialogbreite (mit je 24 Pixel Abstand zu beiden Seiten).

Grafiken müssen als Layoutgrafiken definiert werden.

Fokussetzung nach Ausführen der Aktionsbuttons:

• Klick auf “Abbrechen” > Fokus wird nach Schließen des Modals wieder auf das Element gesetzt, mit dem der Dialog geöffnet wurde.
• Klick auf “Verwerfen” > Fokussetzung ist abhängig vom jeweiligen Kontext und ist daher in den entsprechenden Userstories zu definieren.

• Fokus liegt beim Erscheinen der Meldung auf dem ersten interaktiven Element im Modal.
• Mit Tab-Taste kann zum nächsten Interaktiven Element navigiert werden.
• Enter oder Leertaste bei fokussiertem Button führt die jeweilige Aktion aus und schließt den Dialog.
• Enter oder Leertaste bei einem fokussierten Link öffnet diesen in einem neuen Browertab (Abweichung vom Standardverhalten des Elements “Link”)
• Drücken der Escape-Taste löst in Sicherheitsabfragen die Aktion “Abbrechen” aus. Drücken der Escape-Taste in Fehlerdialogen löst keine Aktion aus.

• Klick mit linker Maustaste auf eine Aktion führt diese aus und schließt das Modal.
• Klick mit linker Maustaste auf einen Link im Inhaltsbereich des Verfahrens öffnet diesen in einem neuen Browsertab (Abweichung vom Standardverhalten des Elements “Link”)