Ein Modal ist ein Fenster, das sich über die Seite legt und die Bedienung dahinter sperrt, bis es geschlossen wird. Es nimmt eine Eingabe auf oder verlangt eine Entscheidung. Zur Technik gehört, dass der Tastaturfokus im Fenster bleibt und die Escape-Taste es schließt.
- Modal
Fenster, das sich über den Inhalt legt und die Seite dahinter so lange sperrt, bis es geschlossen wird.
Beispiel: „Zum Löschen eines Eintrags öffnet sich ein Modal mit der Rückfrage.“Auch: Modales Fenster oder Dialogfenster. Das Wort „modal“ beschreibt dabei die Eigenschaft und nicht das Fenster: Die Seite wechselt in einen Zustand, in dem nur noch dieses Fenster bedienbar ist.
Abgrenzung zum Popup: Ein Popup erscheint uneingeladen und wirbt meist. Ein Modal ist die Antwort auf eine Handlung des Besuchers.
Ein Modal unterbricht, deshalb braucht es einen Grund
Gute Gründe sind eine Rückfrage vor einer Handlung, die sich schwer zurücknehmen lässt, eine kurze Eingabe, die den Besucher nicht aus seinem Kontext reißen soll, und die vergrößerte Ansicht eines Bildes. In allen drei Fällen hat der Besucher das Fenster selbst ausgelöst und erwartet es.
Schlechte Gründe sind Newsletter-Anmeldungen nach drei Sekunden und Hinweise, die genauso gut auf der Seite stehen könnten. Wer ein Modal einsetzt, um Aufmerksamkeit zu erzwingen, bekommt sie einmal und zahlt mit Besuchern, die sofort schließen.
Fokus, Escape und der Inhalt dahinter
Ein Modal ist ein Dialog im Sinne der ARIA Authoring Practices und hat deshalb feste Anforderungen. Der Tastaturfokus wandert beim Öffnen in das Fenster und bleibt darin, solange es offen ist. Die Escape-Taste schließt es. Beim Schließen kehrt der Fokus auf das Element zurück, das das Fenster geöffnet hat. Der Inhalt dahinter wird für Screenreader ausgeblendet, damit nicht zwei Dokumente gleichzeitig vorgelesen werden.
Dazu kommt ein Punkt, der oft vergessen wird: Der Hintergrund darf nicht mitscrollen. Sonst verliert der Besucher beim Schließen seine Leseposition. In HTML bringt das Element dialog diese Anforderungen größtenteils mit, wenn es über showModal geöffnet wird.
Auf dem Telefon wird aus dem Modal eine eigene Seite
Ein Fenster, das auf dem Desktop angenehm über dem Inhalt liegt, füllt auf einem Telefon den ganzen Bildschirm. Dann ist der Überlagerungseffekt wirkungslos, und der Besucher sieht etwas, das sich wie eine neue Seite verhält, aber nicht über die Zurück-Taste zu verlassen ist. Wir bauen längere Eingaben auf kleinen Bildschirmen deshalb als eigene Seite mit eigener URL und lassen das Modal für kurze Rückfragen.