WCAG-succescriterium 2.4.3 Focus volgorde

Niveau A

Uitleg

Wanneer een toetsenbordgebruiker binnen de webpagina navigeert, bijvoorbeeld met de Tab-toets, moet de tabvolgorde logisch en voorspelbaar zijn.

De visuele focusvolgorde moet betekenisvol zijn.

Een voorspelbare focus volgorde is belangrijk voor toetsenbordgebruikers. Zij kunnen dan bijvoorbeeld makkelijker binnen een pagina links of buttons ontdekken of een formulier invullen.

Zorg ervoor dat de natuurlijke tabvolgorde bij de verschillende resoluties, schermbreedtes en oriëntaties logisch blijft.

Met het tabindex attribuut kan de volgorde ook specifiek worden ingesteld per element, maar dat raden we af, omdat je dan voor elk element op de pagina zo'n tabindex zou moeten zetten, en het is bijna onmogelijk dat goed te doen, zeker bij verschillende resoluties, schermbreedtes en oriëntaties.

Voor een Nederlandstalige website is leesvolgorde van links naar rechts en van boven naar beneden. Zorg er dan voor dat ook de tabvolgorde van links naar rechts en van boven naar beneden is. Voor bijvoorbeeld Hebreeuws of Arabisch kan deze volgorde anders zijn. Laat de tabvolgorde die van de taalinstelling en leesrichting volgen.

Gerelateerde NL Design System-richtlijnen

• Formulieren: Gebruik geen positieve tabindex.
• Formulieren: Zorg voor een consistente navigatie en benaming van links en buttons.
• Formulieren: Maak toetsenbordfocus goed zichtbaar.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Tab met het toetsenbord door de pagina en controleer of de tabvolgorde logisch en zoals verwacht is. De tabvolgorde moet voor elk type weergave logisch, zichtbaar en voorspelbaar zijn en niet alleen voor een breed scherm op hoge resolutie.

Let vooral op als de volgorde voor een andere weergave wordt aangepast via CSS met grid of flexbox.

Aanvullende testen:

• Tab ook terug met shift-tab, werkt dat ook voorspelbaar?
• Controleer dialogs zoals het responsive menu. Is de tabvolgorde logisch. Keert bij het sluiten de focus terug naar de button om het dialog te openen?
• Test bij verschillende schermbreedtes en oriëntaties (landscape/portrait).
• Zoom in tot 400% en check de tabvolgorde.
• Controleer dynamisch toegevoegde inhoud, zoals extra formuliervelden bij het selecteren van optie of een uitklapmenu.

Tips

Focus en autonomie

Verplaats de focus van de gebruiker zo min mogelijk. Het is geen prettige ervaring om "verplaatst te worden" op een website.

W3C referenties

• Engelse tekst van het WCAG-succescriterium: 2.4.3 Focus Order.
• Nederlandse vertaling van het WCAG-succescriterium: 2.4.3 Focus volgorde.
• Engelstalige informatie op How to Meet WCAG: Quick Reference 2.4.3 Focus Order.
• Engelstalige toelichting: Understanding SC 2.4.3 Focus Order.

Wat is verplicht?

De richtlijnen zijn geen wettelijke verplichting of vervanging voor WCAG. Ze zijn een praktische uitleg met voorbeelden die helpen bij het toegankelijk inzetten van NL Design System. Meer informatie of de wettelijke verplichting staat op de pagina wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Aanvullingen of opmerkingen?

Deel je mening op GitHub of bezoek onze actieve community op Slack.