Focusvolgorde

Wat het vereist

Een toetsenbordgebruiker die op Tab drukt, moet langs interactieve elementen bewegen in een volgorde waarmee elke taak te voltooien is zonder context te verliezen. In Nederlandstalige en andere LTR-lay-outs betekent dit bijna altijd van boven naar beneden en van links naar rechts. De volgorde hoeft niet identiek te zijn aan de visuele volgorde, maar elke afwijking moet de betekenis bewaren — een “sla over naar de voettekst”-link mag buiten de hoofdstroom vallen, zolang de rest logisch is.

De fouten die dit succescriterium aanpakt zijn dialoogvensters die focus verbergen, drag-rearranged rasters met een verouderde tabvolgorde en CSS die inhoud visueel herordent terwijl de DOM in de oorspronkelijke volgorde blijft.

Hoe hieraan te voldoen

• Bouw de DOM op in leesvolgorde. Wanneer de visuele lay-out verschilt, gebruik CSS Grid of Flexbox order-eigenschappen zorgvuldig — maar het is de bronvolgorde die Tab volgt.
• Wanneer een modaal venster opent, verplaats de focus er naartoe en houd de focus erbinnen totdat het venster sluit. Bij sluiten, herstel de focus naar het triggerelement.
• Gebruik nooit positieve tabindex-waarden (tabindex="3"). Ze creëren aangepaste volgordes die strijdig zijn met de DOM en breken zodra de pagina wijzigt.
• Werk bij versleepbare lijsten de DOM-volgorde bij zodat die overeenkomt met de nieuwe visuele volgorde en de tabvolgorde gesynchroniseerd blijft.
• Test door met Tab van de adresbalk door elk focusbaar element op de pagina te gaan. Als men ooit het gevoel heeft „verloren te zijn“, geldt dat ook voor gebruikers.

Veelvoorkomende fouten

• Modaal venster opent, maar de focus blijft op de pagina erachter. Tab doorloopt verborgen elementen terwijl het modaal scherm onbereikt zweeft.
• Uitschuifbaar mobiel menu opent, focus blijft in de paginatekst. Schermlezergebruikers kunnen niet vinden wat zojuist verscheen.
• flex-direction: row-reverse keert de visuele volgorde om; de DOM-volgorde is ongewijzigd; Tab beweegt nu van rechts naar links terwijl de leesrichting van links naar rechts gaat.
• Aangepaste tabindex-waarden verspreid door een formulier, waarbij latere toevoegingen tabindex="0" overerven en achteraan belanden.
• Auto-focus op een „abonneren“-pop-up die 8 seconden na het laden verschijnt en de focus wegtrekt van wie aan het lezen was.

Waarom het ertoe doet

Focusvolgorde is het equivalent van leeesvolgorde voor het toetsenbord. Wanneer die breekt, is de ervaring niet traag — ze is onsamenhangend. Gebruikers met motorische beperkingen die uitsluitend met Tab en Shift+Tab navigeren, kunnen naar het verkeerde gedeelte van een formulier worden gestuurd, een verplicht veld volledig missen of hun plek op een lange pagina kwijtraken door één verkeerd geplaatst element.