Mit Escape schließen und den Fokus wiederherstellen
Bieten Sie einen zuverlässigen Ausweg, der die nutzende Person zurückführt.
Mit Escape schließen und den Fokus wiederherstellen 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.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Every Modal Needs an Exit
A modal that you cannot leave is a trap. Users expect a fast, reliable way to close it without hunting for a tiny button.
Escape Is the Universal Key
The Escape key is the agreed shortcut to dismiss a dialog. Keyboard and screen reader users reach for it first, so always support it.
Native dialog Handles Escape
A native dialog opened with showModal() closes on Escape automatically, firing a cancel event you can listen to if needed.
dialog.addEventListener('cancel', onClose);Wiring Escape Yourself
For a custom modal, listen for the keydown event and close when the key is Escape. It is a few lines, but never skip it.
if (e.key === 'Escape') closeModal();Remember Where Focus Was
Before you open the modal, save the element that had focus. document.activeElement is the trigger you will return to later.
const opener = document.activeElement;Restore Focus on Close
When the modal closes, send focus back to that saved trigger. This restore focus step is what makes closing feel seamless.
closeModal();
opener.focus();Why Restoring Matters
Without restore, focus jumps to the top of the page. The user loses their place and must tab all the way back. Frustrating and avoidable. 😕
A Visible Close Button Too
Escape is not enough on its own. Offer a clearly labeled close button so mouse and touch users have an obvious exit as well.
<button aria-label="Close dialog">×</button>Clicking the Backdrop
Many modals also close when you click the dimmed backdrop. It is a nice extra, but it must never replace Escape or the button.
Be Careful With Destructive Actions
For dialogs that confirm something risky, you may suppress quick dismissal so a stray Escape does not skip an important choice.
Test the Full Loop
Open with the keyboard, press Escape, and confirm focus lands back on the exact trigger you started from. That round trip is the goal. ✅
Quick Check
A user opens a modal from a button and presses Escape. Where should focus land?
Recap: Close Cleanly
You learned to support Escape, offer a visible close button, and restore focus to the opener so closing never strands the user. 🎯
Häufig gestellte Fragen
Ist die Lektion „Mit Escape schließen und den Fokus wiederherstellen“ kostenlos?
Ja — der vollständige Text von „Mit Escape schließen und den Fokus wiederherstellen“ 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 „Mit Escape schließen und den Fokus wiederherstellen“?
Bieten Sie einen zuverlässigen Ausweg, der die nutzende Person zurückführt. 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 „Mit Escape schließen und den Fokus wiederherstellen“?
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
- Dialogrollen und das native dialog-Element
- Fokus im Modal einschließen
- Mit Escape schließen und den Fokus wiederherstellen
- Inaktiver Hintergrund und aria-modal