Fokusfalle im Modaldialog

Silktide identifiziert Seiten, die einen Modaldialog enthalten – ein Popup, das die Interaktion mit dem Rest der Seite blockiert – und bittet Sie zu prüfen, ob der Tastaturfokus korrekt verwaltet wird, solange der Dialog geöffnet ist. Dies ist eine manuelle Prüfung: Automatisierte Tests können den Dialog finden, aber nicht beobachten, wie er sich beim Öffnen und Schließen verhält.

Warum das wichtig ist

Während ein Modaldialog geöffnet ist, ist die Seite dahinter sichtbar, aber inert. Wenn der den Dialog verlassen kann, landen Tastatur- und -Nutzende bei der Navigation mit der Tabulatortaste in Inhalten, die sie weder sehen noch benutzen können, lesen die darunterliegende Seite ohne Kontext und verlieren vollständig ihre Position. Und wenn der Fokus beim Schließen des Dialogs nicht zurückkehrt, werden sie an den Anfang der Seite versetzt und müssen wieder zu ihrer ursprünglichen Stelle navigieren.

So beheben Sie das Problem

Öffnen Sie jeden Dialog auf der Seite und überprüfen Sie nur mit der Tastatur:

Wenn der Dialog geöffnet wird, wandert der Fokus in ihn hinein – typischerweise auf das erste Bedienelement oder auf den Dialog selbst.
Durch Drücken von Tab und Umschalt+Tab wird zyklisch durch die Bedienelemente des Dialogs navigiert, ohne jemals die Seite dahinter zu erreichen.
Das Drücken der Escape-Taste schließt den Dialog (bei Dialogen, die geschlossen werden können).
Wenn der Dialog geschlossen wird, kehrt der Fokus zu dem Element zurück, das ihn geöffnet hat.

Wenn einer dieser Punkte fehlschlägt, korrigieren Sie Ihre Dialog-Implementierung. Das native <dialog>-Element, das mit showModal() geöffnet wird, liefert den Großteil dieses Verhaltens kostenlos; benutzerdefinierte Dialoge müssen es skripten. Wenn alles korrekt funktioniert, Sie den Fund.

Wie Silktide dies testet

Es wird nach Anzeichen gesucht, dass eine Seite einen Modaldialog enthält: ein natives <dialog>- Element, ein Element mit role=\"dialog\" oder role=\"alertdialog\", ein Element mit aria-modal=\"true\" oder ein Element mit einem üblichen Klassennamen im Modal-Stil, das zudem fokussierbare Bedienelemente enthält.
Wenn eines davon gefunden wird, wird eine Überprüfungsaufforderung für die Seite ausgelöst.

Silktide kann den Dialog nicht öffnen und dessen Fokusverhalten zur Laufzeit beobachten, daher schlägt diese Prüfung nie automatisch fehl – sie bittet Sie um eine Bestätigung.

Fehlerbehebung

Die Seite hat keinen sichtbaren Modaldialog

Viele Websites liefern Dialog-Markup auf jeder Seite mit (ein Newsletter-Popup, ein Cookie- Dialog, ein verstecktes Such-Overlay), das nur unter bestimmten Bedingungen erscheint. Die Aufforderung gilt dennoch: Überprüfen Sie das Verhalten des Dialogs in dem Zustand, in dem er geöffnet wird. Wenn es sich bei dem Markup um ein Überbleibsel handelt, das nie geöffnet werden kann, ziehen Sie in Betracht, es zu entfernen.

Unsere Dialoge stammen aus einer Drittanbieter-Bibliothek

Bekannte Dialogbibliotheken verwalten den Fokus in der Regel korrekt, aber Konfiguration und benutzerdefinierte Inhalte können dies beeinträchtigen. Überprüfen Sie das Verhalten auf Ihren eigenen Seiten, statt sich auf die Dokumentation der Bibliothek zu verlassen.