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 van de content niet verandert.
- Zorg dat de focus volgorde de bedienbaarheid van de content niet verandert.
- Zorg dat de focus volgorde niet door verborgen bedieningselementen verplaatst.
- Zorg dat de focus volgorde correct verplaatst 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 |
Lees het artikel over toetsenbordtoegankelijkheid
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?
Hoe toets je dit?
Benodigdheden
- Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Optioneel: Stylus browser-extensie
- In combinatie met mijn CSS-stijl: Maak focus zichtbaar
- Als de standaard focusindicator niet duidelijk zichtbaar is
Testprocedure
Test 1: Focus volgorde
Statische content
- Verken de pagina met toetsenbord en muis
- Bepaal welke statische bedieningselementen er zijn:
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, enz.)
- Bepaal welke elementen de focus kunnen krijgen (zie ook 2.1.1 Toetsenbord)
- Bepaal in welke volgorde de elementen visueel op de pagina staan
- Bepaal welke statische bedieningselementen er zijn:
- Herlaad de pagina
- Navigeer alleen met het toetsenbord (Tab, Shift + Tab en/of de pijltoetsen) en controleer:
- Of de volgorde waarin de elementen de focus krijgen logisch en betekenisvol is
- Of een afwijking van de visuele volgorde de betekenis en bedienbaarheid niet verandert
- Of de focus door elementen gaat die voor alle gebruikers verborgen zouden moeten zijn
Dynamische content
- Verken de pagina
- Bepaal welke dynamische content er is:
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Bepaal welke dynamische content er is:
- Controleer bij elementen die uitvouwen (accordeons, subnavigaties, tabpanelen):
- Of de focus in de focus volgorde direct na het activerende element komt
- Controleer bij andere dynamische content (carrousels, dynamisch geladen secties):
- Of de focus op een logische plek in de focus volgorde komt
- Of de focus volgorde correct mee gaat bij wisselen van de content
- Controleer bij ankerlinks:
- Of de focus naar het doel van de ankerlink wordt verplaatst
- Controleer bij een modaal dialoogvenster:
- Of bij openen de focus naar het dialoogvenster gaat
- Of de focus binnen het dialoogvenster blijft tot het wordt gesloten
- Of bij sluiten de focus teruggaat naar het element dat het dialoogvenster opende (of een logische plek)
- Herhaal stap 3 en 5 t/m 8 in een andere browser
Beoordeling
- De focus volgorde moet logisch en betekenisvol zijn
- De focus volgorde moet de visuele volgorde volgen, of bij een afwijking de betekenis en bedienbaarheid behouden
- De focus volgorde moet niet door elementen gaan die voor alle gebruikers verborgen zouden moeten zijn
- Dynamische content moet op een logische plek in de focus volgorde komen
- Bij een ankerlink moet de focus naar het doel van de ankerlink gaan
- Bij een modaal dialoogvenster moet de focus naar het venster gaan bij openen, binnen het venster blijven tot het sluit, en bij sluiten teruggaan naar het activerende element of een logische plek