Sluiten met Escape en de focus herstellen
Bied een betrouwbare uitweg die de gebruiker terugbrengt
Sluiten met Escape en de focus herstellen is een gratis Web Accessibility Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Web Accessibility Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Web Accessibility Academy bevat in totaal 4 lessen.
Elk modaal venster heeft een uitgang nodig
Een modaal venster waaruit je niet kunt ontsnappen, is een val. Gebruikers verwachten een snelle, betrouwbare manier om het te sluiten zonder naar een piepkleine knop te hoeven zoeken.
Escape is de universele toets
De toets Escape is de gebruikelijke sneltoets om een dialoogvenster te sluiten. Toetsenbord- en schermlezergebruikers proberen die als eerste, dus ondersteun hem altijd.
Native dialog verwerkt Escape
Een native dialog die met showModal() is geopend, sluit automatisch met Escape en activeert een cancel-gebeurtenis waarnaar je zo nodig kunt luisteren.
dialog.addEventListener('cancel', onClose);Escape zelf koppelen
Luister voor een aangepast modaal venster naar de gebeurtenis keydown en sluit het wanneer de toets Escape is. Het zijn maar een paar regels, maar sla dit nooit over.
if (e.key === 'Escape') closeModal();Onthoud waar de focus was
Sla voordat je het modale venster opent het element op dat de focus had. document.activeElement is de activeringsknop waarnaar je later terugkeert.
const opener = document.activeElement;Herstel de focus bij het sluiten
Verplaats de focus wanneer het modale venster sluit terug naar de opgeslagen activeringsknop. Deze stap voor het herstellen van de focus zorgt ervoor dat sluiten naadloos aanvoelt.
closeModal();
opener.focus();Waarom herstellen belangrijk is
Zonder herstel springt de focus naar het begin van de pagina. De gebruiker raakt zijn plek kwijt en moet helemaal terug tabben. Frustrerend en onnodig. 😕
Ook een zichtbare sluitknop
Escape alleen is niet genoeg. Bied een duidelijk gelabelde sluitknop, zodat muis- en aanraakgebruikers ook een voor de hand liggende uitgang hebben.
<button aria-label="Close dialog">×</button>Op de achtergrondlaag klikken
Veel modale vensters sluiten ook wanneer je op de gedimde achtergrondlaag klikt. Dat is een prettige extra, maar het mag Escape of de knop nooit vervangen.
Wees voorzichtig met destructieve acties
Bij dialoogvensters die iets riskants bevestigen, kun je het snelle sluiten uitschakelen, zodat een verdwaalde druk op Escape geen belangrijke keuze overslaat.
Test de volledige cyclus
Open het met het toetsenbord, druk op Escape en controleer of de focus terugkomt op precies de activeringsknop waarmee je begon. Die heen-en-terugbeweging is het doel. ✅
Korte controle
Een gebruiker opent een modaal venster met een knop en drukt op Escape. Waar moet de focus terechtkomen?
Samenvatting: sluit netjes
Je hebt geleerd Escape te ondersteunen, een zichtbare sluitknop aan te bieden en de focus naar de opener te herstellen, zodat de gebruiker bij het sluiten nooit verdwaalt. 🎯
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Sluiten met Escape en de focus herstellen” gratis?
Ja — de volledige tekst van “Sluiten met Escape en de focus herstellen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Web Accessibility Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Web Accessibility Academy bevat in totaal 4 lessen.
Wat leer ik in “Sluiten met Escape en de focus herstellen”?
Bied een betrouwbare uitweg die de gebruiker terugbrengt Je oefent met Web Accessibility Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Web Accessibility Academy te beginnen?
Ervaring vooraf is niet nodig. Web Accessibility Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Sluiten met Escape en de focus herstellen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Web Accessibility Academy?
Ja. Elke les over Web Accessibility Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Dialoogrollen en het native dialog-element
- De focus binnen de modal vasthouden
- Sluiten met Escape en de focus herstellen
- Inerte achtergrond en aria-modal