SSMW - Einheitlicher Standard für modale Fenster

Definitionen

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

Positionierung und Scrollen:

• Für Safari muss overscroll-behavior-y: none; verwendet werden, um ein „gummiertes“ Scrollen zu verhindern;

• Bei geöffneter Tastatur auf Mobilgeräten wird das Fenster am oberen Rand ausgerichtet, damit das Eingabefeld im Sichtbereich bleibt.

Struktur und Semantik

<dialog> ist das bevorzugte Element für modale Fenster.

• Bietet integrierte Unterstützung für aria-modal="true", was die Barrierefreiheit verbessert.

CSS-Positionierung:

• 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.

Optimierung:

• Das modale Element 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 scrollbar-gutter: stable; im HTML empfohlen.

Barrierefreiheit

Fokus und Navigation:

• Das modale Fenster sollte den Fokus lokal verwalten;

• Der Benutzer kann mit der Tabulatortaste zwischen interaktiven Elementen wechseln, ohne das modale Fenster zu verlassen.

Formular innerhalb des modalen Fensters:

• Der automatische Fokus auf das erste Eingabefeld nach dem Öffnen des Fensters beschleunigt die Dateneingabe.

Verschachtelte Modalfenster:

• Bei mehreren Ebenen müssen z-index und der Fokus korrekt verwaltet werden;

• Die Scroll-Sperre und die Fokuslogik gelten nur für die oberste aktive Ebene.

Interaktivität und Visuelle Rückmeldung

Schließen und Steuerung:

• Das modale Fenster muss auf alle drei gängigen Schließmethoden korrekt reagieren: Esc, die Schaltfläche „Schließen“ und Klicks auf den Hintergrund.

Formulare und Abschlussszenarien:

• Nach dem erfolgreichen Absenden des Formulars schließt sich das Modalfenster und weicht einer kurzen Erfolgsmeldung.

  Ein solches Abschlussszenario sorgt für eine vorhersehbare und angenehme Benutzererfahrung.

Animationen:

• Es wird empfohlen, das Öffnen und Schließen 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.

Abstände und Anpassungsfähigkeit:

• Innere Abstände verhindern, dass das Modal an den Bildschirmrändern klebt;
• Das vertikale Scrollen sollte auf kleinen viewport komfortabel sein.