Modal

TL;DR

Ein Modal ist ein überlagerndes Dialogfenster, das Aufmerksamkeit erzwingt. Sparsam einsetzen – zu viele Modals verschlechtern die User Experience.

Was ist ein Modal?

Ein Modal (auch Dialog oder Overlay) ist ein Fenster, das über dem aktuellen Inhalt erscheint. Der Hintergrund wird oft abgedunkelt, und der Nutzer muss mit dem Modal interagieren, bevor er fortfahren kann.

Wann Modals sinnvoll sind

• Bestätigungen vor destruktiven Aktionen ("Wirklich löschen?")
• Wichtige Formulare (Login, Newsletter-Signup)
• Detailansichten ohne Seitenwechsel
• Kritische Warnungen

Wann Modals vermeiden

• Werbung oder aggressive Popups
• Inhalte, die auf eigener Seite besser wären
• Informationen, die nicht sofort benötigt werden
• Mobile: Modals nehmen ganzen Bildschirm ein

Best Practices

• Klarer Schließen-Button (X oben rechts)
• ESC-Taste schließt das Modal
• Klick außerhalb schließt (optional)
• Fokus-Trapping: Tab bleibt im Modal
• Hintergrund nicht scrollbar

Barrierefreiheit

• role="dialog" und aria-modal="true"
• Fokus beim Öffnen ins Modal setzen
• Beim Schließen Fokus zurück zum Auslöser
• Screenreader-Ankündigung

Modals und Nachhaltigkeit

Sparsamer Einsatz ist nachhaltiger:

• Weniger Modals = weniger JavaScript
• Weniger Unterbrechungen = effizientere Nutzung
• Weniger Frustration = weniger abgebrochene Sessions

Fazit

Modals sind mächtig, aber mit Vorsicht einzusetzen. Jedes Modal unterbricht den Nutzerfluss – das sollte einen guten Grund haben.