SSMW - Einheitlicher Standard für Modale Fenster

Definitionen

Der SSMW-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionsweise von Modalen Fenstern fest.

Struktur und Semantik

<dialog> ist das bevorzugte Element für modale Fenster, da es eine integrierte Unterstützung für aria-modal="true" bietet, was die Barrierefreiheit verbessert.

Wenn <dialog> innerhalb eines anderen Containers als body gerendert wird, wird position: static; festgelegt, um die Vererbung widersprüchlicher Eigenschaften zu verhindern. Im Dokumentstamm wird die standardmäßige absolute oder feste Positionierung für Overlays verwendet; für Safari und Edge muss overscroll-behavior-block: none; verwendet werden, verwendet werden, um ein „gummiertes“ Scrollen zu verhindern, und bei geöffneter Tastatur auf mobilen Geräten sollte das Fenster am oberen Rand ausgerichtet werden, damit das Eingabefeld im Sichtbereich bleibt.

Das modale Fenster sollte erst beim Aufruf des Fensters zum DOM hinzugefügt werden. Um eine Verschiebung der Benutzeroberfläche zu verhindern, wenn das Scrollen der Hauptseite blockiert ist, wird empfohlen, scrollbar-gutter: stable; für html festzulegen.

Barrierefreiheit

Ein modales Fenster sollte den Fokus lokal verwalten, damit der Benutzer mit der Tab-Taste zwischen den interaktiven Elementen navigieren kann, ohne das modale Fenster zu verlassen. Bei mehreren Ebenen müssen z-index und der Fokus korrekt verwaltet werden, wobei nur die oberste aktive Ebene das Scrollen blockieren und den Fokus erhalten sollte.

Die automatische Fokussierung auf das erste <input> nach dem Öffnen des Fensters beschleunigt die Dateneingabe.

Interaktivität und Visuelle Rückmeldung

Das Modalfenster sollte korrekt auf alle drei üblichen Schließmethoden reagieren: Esc, die Schaltfläche Schließen und einen Klick auf den Hintergrund. Nach dem erfolgreichen Absenden des Formulars schließt sich das Modalfenster und macht Platz für eine kurze Meldung über den erfolgreichen Vorgang. Ein solches Abschlussszenario sorgt für eine vorhersehbare und angenehme Benutzererfahrung.

Es wird empfohlen, das Ein- und Ausblenden des Modalfensters über CSS-Klassen mit sanften Übergängen zu realisieren. Dies verleiht der Benutzeroberfläche ein Gefühl von Vollständigkeit und visueller Weichheit. Außerdem ist es ratsam, interne Abstände hinzuzufügen, die verhindern, dass das Modalfenster an den Bildschirmrändern klebt. Da das Modalfenster höher als der Viewport sein kann, weshalb ein interner Bildlauf vorgesehen werden muss.