Fokus beim Schließen einer Ebene zurückgeben
Bringen Sie die nutzende Person dorthin zurück, wo sie aufgehört hat.
Fokus beim Schließen einer Ebene zurückgeben ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Ebenen übernehmen den Fokus
Wenn ein Modal, Menü oder Drawer geöffnet wird, wandert der Fokus hinein. Beim Schließen müssen Sie dafür sorgen, dass der Fokus zurückkehrt zu der Stelle, an der sich der Nutzer befand.
Das Problem des verlorenen Fokus
Wenn eine geschlossene Ebene den Fokus auf einem entfernten Element zurücklässt, fällt er auf den Seitenkörper zurück. Der Nutzer bleibt orientierungslos und weiß nicht, wo er sich befindet.
Den Auslöser merken
Die Lösung beginnt vor dem Öffnen: Speichern Sie eine Referenz auf das Element, das die Ebene ausgelöst hat, normalerweise document.activeElement.
const trigger = document.activeElement;Beim Schließen wiederherstellen
Rufen Sie beim Schließen der Ebene focus() für den gespeicherten Auslöser auf, damit der Nutzer genau an die Ausgangsstelle zurückkehrt.
trigger.focus();Der vollständige Ablauf
Öffnen: Auslöser speichern und die Ebene fokussieren. Schließen: Ebene ausblenden und den Auslöser wieder fokussieren. Dieser Ablauf ist der Fokusvertrag jeder schließbaren Ebene. 🔁
Das native dialog-Element hilft
Das dialog-Element des Browsers stellt den Fokus automatisch auf das öffnende Element zurück, wenn Sie close() aufrufen. Dadurch entfällt die manuelle Verwaltung.
myDialog.close();Jeden Schließweg berücksichtigen
Stellen Sie den Fokus unabhängig davon wieder her, wie die Ebene geschlossen wird: Eine Schließen-Schaltfläche, die Escape-Taste oder ein Klick auf den Hintergrund müssen den Nutzer zurückführen.
Wenn der Auslöser verschwunden ist
Wenn der Auslöser während der geöffneten Ebene entfernt wurde, verschieben Sie den Fokus stattdessen auf ein sinnvolles nahegelegenes Element – niemals ins Leere.
Warum das so wichtig ist
Sehende Nutzer mit der Maus bemerken es kaum. Für Tastatur- und Screenreader-Nutzer kann eine fehlende Fokus-Rückkehr eine Funktion jedoch unbenutzbar machen.
Nur mit der Tastatur testen
Öffnen Sie die Ebene mit der Eingabetaste, schließen Sie sie mit Escape und prüfen Sie, ob der Fokusring wieder auf der Schaltfläche erscheint, die sie geöffnet hat.
Machen Sie es zur Gewohnheit
Betrachten Sie die Fokus-Rückkehr als Bestandteil jedes Overlays, nicht als nachträglichen Zusatz. Bauen Sie sie ein, sobald Sie die Logik zum Öffnen und Schließen hinzufügen.
Kurze Überprüfung
Ein benutzerdefiniertes Modal wird geschlossen. Wo sollte der Fokus anschließend landen?
Zusammenfassung
Sie können den Ablauf jetzt schließen: Speichern Sie den Auslöser beim Öffnen, stellen Sie den Fokus bei jedem Schließweg wieder auf ihn zurück und nutzen Sie nach Möglichkeit das native dialog-Element. 🎯
Häufig gestellte Fragen
Ist die Lektion „Fokus beim Schließen einer Ebene zurückgeben“ kostenlos?
Ja — der vollständige Text von „Fokus beim Schließen einer Ebene zurückgeben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Fokus beim Schließen einer Ebene zurückgeben“?
Bringen Sie die nutzende Person dorthin zurück, wo sie aufgehört hat. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Fokus beim Schließen einer Ebene zurückgeben“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- tabindex 0, -1 und niemals positiv
- Fokus nach einer Aktion verschieben
- Fokus beim Schließen einer Ebene zurückgeben
- Roving tabindex in Widgets verwalten