Succescriterium 2.4.3 Focus volgorde
Als in webpagina’s sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.
Focus volgorde begrijpen (Engelstalig)
Focus volgorde is de volgorde waarin elementen op een webpagina actief worden bij toetsenbordnavigatie. Deze volgorde moet kloppen met hoe de content bedoeld is. De volgorde waarin je door elementen tabt moet dus logisch zijn en de betekenis van de content bewaren.
Als de focus volgorde niet logisch is, dan kan dit verwarrend zijn voor mensen die alleen een toetsenbord gebruiken en mensen die een schermlezer gebruiken.
In HTML wordt de focus volgorde bepaald door:
- De volgorde van elementen in de code (de DOM)
- Aanpassingen in de volgorde met het
tabindex-attribuut - Aanpassingen in de volgorde met JavaScript
Niet alle volgorde is even belangrijk. Een artikel en een zijbalk kunnen prima in verschillende volgordes staan zonder dat de betekenis verandert. Maar binnen een artikel is de volgorde meestal wel belangrijk.
Hoe pas je dit toe?
- Zorg dat de focus volgorde de betekenis of bedienbaarheid van de content niet verandert.
- Zorg dat de focus volgorde niet door verborgen bedieningselementen gaat.
- Zorg dat de focus volgorde correct mee gaat bij dynamische content, zoals een navigatie, dialoogvenster, enz.
Navigeren met het toetsenbord
| Taak | Toets |
|---|---|
| Naar het volgende bedieningselement | Tab |
| Naar het vorige bedieningselement | Shift + Tab |
| Link activeren | Enter |
| Knop activeren | Enter of spatie |
| Selectievakje selecteren | Spatie |
| Navigeren tussen keuzerondjes | ↑ (pijltje naar boven) en ↓ (pijltje naar beneden) |
| Keuzerondje selecteren | Spatie |
| Keuzelijst openen | Spatie |
| Navigeren in een keuzelijst | ↑ (pijltje naar boven) en ↓ (pijltje naar beneden) |
| Element sluiten | Esc |
Handige tips
- Plaats bedieningselementen in een logische volgorde in de code.
- Zorg dat nieuwe bedieningselementen in de code direct na het element dat het triggerde verschijnen.
- Vermijd zo veel mogelijk een aangepaste focus volgorde.
Voor wie is dit belangrijk?
- Mensen die alleen het toetsenbord gebruiken.
- Mensen die een fysieke of motorische beperking hebben.
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
- Ontwikkelaar
Hoe toets je dit?
Benodigdheden
- Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
Testprocedure
Test 1: Bedieningselementen
- Verken de pagina met toetsenbord en muis
- Bepaal welke bedieningselementen er allemaal zijn
- Probeer alle bedieningselementen uit
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- (enz.)
- Bepaal welke elementen allemaal de focus kunnen krijgen (zie ook 2.1.1 Toetsenbord)
- Herlaad de pagina
- Gebruik nu alleen het toetsenbord (Tab, Shift + Tab en/of de pijltoetsen) en controleer:
- Of de volgorde waarin de elementen de focus krijgen logisch en intuïtief is
- Of de focus volgorde door verborgen elementen gaat
- Bij ankerlinks:
- Of de focus wordt verplaatst naar het doel van de ankerlink
- Bij dialoogvensters:
- Of bij openen de focus wordt verplaatst naar het dialoogvenster
- Of de focus binnen het dialoogvenster blijft tot het wordt gesloten
- Of bij sluiten de focus terug gaat naar het element dat het dialoogvenster triggerde
- Of de focus volgorde correct mee gaat bij andere dynamische content
- Herhaal stap 3 in een andere browser
Beoordeling
- De focus volgorde moet logisch en betekenisvol zijn
- De focus volgorde moet niet door verborgen elementen gaan