Focusbeheer
Bij dynamische wijzigingen (modals openen/sluiten, items verwijderen, AJAX-laden) moet de focus programmatisch naar een logische locatie worden verplaatst. Eén van de meest over het hoofd geziene patronen.
When something new opens, such as a pop-up, the keyboard's attention should move to it — and return to where you were when it closes.
Focusbeheer is niet één enkel WCAG-criterium — het is een patroon dat 2.4.3 (Focusvolgorde), 2.4.7 (Focus zichtbaar) en 2.1.2 (Geen toetsenbordval) ondersteunt. Het principe: wanneer de context van de gebruiker verandert, moet de focus logisch volgen.
Waarom dit belangrijk is
Wanneer focus niet wordt beheerd na dynamische wijzigingen, raken toetsenbordgebruikers verdwaald. Na het sluiten van een modal springt de focus mogelijk naar de bovenkant van de pagina. Na het verwijderen van een item kan de focus op een onzichtbaar element landen. Dit zijn desoriënterende ervaringen die de taakstroom verbreken.
Hoe te detecteren
Test met toetsenbord: open en sluit een modal (keert de focus terug naar de trigger?), verwijder een item uit een lijst (waar gaat de focus heen?), dien een formulier in met fouten (verplaatst de focus naar de foutsamenvatting?), laad dynamisch nieuwe inhoud (wordt de focus verplaatst of aangekondigd?).
Hoe op te lossen
// Modal: move focus in on open, return on close
const trigger = document.activeElement;
dialog.showModal();
dialog.querySelector('[autofocus]').focus();
dialog.addEventListener('close', () => {
trigger.focus(); // Return focus to what opened it
});
// List deletion: move focus to next item
function deleteItem(item) {
const next = item.nextElementSibling || item.previousElementSibling;
item.remove();
if (next) next.focus();
}
// Form errors: focus the error summary
function showErrors() {
errorSummary.focus(); // Must have tabindex="-1"
}