Focusvolgorde op webpagina’s en in apps

Officiële informatie

Succescriterium 2.4.3 Focus volgorde

Focusvolgorde bepalen

Meestal is het verstandig om de visuele volgorde van de elementen te volgen. Dit betekent dat je de focusvolgorde van boven naar beneden en van links naar rechts laat lopen. Gebruik dezelfde focusvolgorde op alle pagina’s van de website of app.

Het is belangrijk om de focusvolgorde op je website of in je app te testen. Test het zelf en laat het door verschillende gebruikers testen, om te controleren of de volgorde logisch en gebruiksvriendelijk is.

Volgorde handmatig aanpassen

Via tabindex kan je handmatig focusvolgorde aanpassen, onderdelen toevoegen of verwijderen uit de focusvolgorde.

• Gebruik tabindex = 0 om een onderdeel toe te voegen. Deze neemt de positie in de volgorde in op basis van de locatie in de code. Dit kan toegankelijkheid en het gebruiksgemak van je website vergroten.
• Met tabindex = -1 verwijder je een onderdeel uit de volgorde.
• Stel geen volgorde in met een waarde groter dan 0. Bijvoorbeeld tabindex = 2. Dit vergroot de kans op fouten, omdat de focusvolgorde afwijkt van de zichtbare volgorde.

Test het zelf

• Navigeer door de website met het toetsenbord of door de app met het externe toetsenbord om de focusvolgorde te controleren.
  • Gebruik de tabtoets, pijltjestoetsen, de escapetoets, de entertoets en de spatiebalk. 
  • Bekijk of de volgorde logisch is: meestal is dit van links naar rechts en van boven naar onder. 
  • Bij iedere tab moet je duidelijk kunnen zien waar je bent op de pagina. 
  • Vergeet niet om de formulieren te testen. 

Cookiemelding

Zorg dat de cookiemelding als eerste komt in de focusvolgorde. Dit voorkomt dat mensen met een visuele beperking de cookiemelding te laat of helemaal niet tegenkomen.

Meer informatie

• W3C – Understanding Succescriterium 2.4.3 Focus order (Engelstalig)
• W3C – Failure 44: Using tabindex to create a tab order that does not preserve meaning and operability (Engelstalig)
• W3C – Failure 85: Using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order (Engelstalig)

Meer informatie voor apps

Appt – Informatie over focus volgorde voor apps