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 - Toetsenbordnavigatie: Gebruik geen positieve tabindex.
• Formulieren - Meerdere stappen: Zorg voor een consistente navigatie en benaming van links en buttons.
• Formulieren - Visueel ontwerp: Maak toetsenbord focus 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.

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.

Belangrijk: De richtlijnen van NL Design System zijn niet verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.