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)
Focusvolgorde is de volgorde waarin bedieningselementen de focus krijgen als je met Tab door een pagina gaat. Die volgorde moet de betekenis en de bedienbaarheid van de content behouden.
Klopt de volgorde niet, dan springt de focus onlogisch over de pagina. Dat is verwarrend voor mensen die alleen het toetsenbord gebruiken en voor mensen die een schermlezer gebruiken. Wie schermvergroting gebruikt, ziet maar een klein stuk van de pagina. Springt de focus ineens naar een ander deel, dan raakt diegene de weg kwijt.
In HTML wordt de focusvolgorde bepaald door:
- de volgorde van elementen in de code (de DOM)
- het
tabindex-attribuut met een positieve waarde - JavaScript dat elementen toevoegt of de focus verplaatst
Niet elke volgorde is belangrijk. Een artikel en een zijbalk mogen in een andere volgorde staan dan op het scherm. Binnen een formulier of een artikel is de volgorde meestal wél belangrijk. Soms zijn er meerdere goede volgordes. Door een tabel mag je bijvoorbeeld rij voor rij of kolom voor kolom gaan.
Hoe pas je dit toe?
- Zet bedieningselementen in de code in dezelfde volgorde als op het scherm.
- Pas de volgorde van bedieningselementen aan in de code, niet met CSS.
- Gebruik geen
tabindexmet een positieve waarde. - Haal bedieningselementen die niet zichtbaar zijn uit de focusvolgorde, bijvoorbeeld in een gesloten menu.
- Zet content die na een klik verschijnt, zoals een submenu, in de code direct na de knop die de content opent.
- Verplaats bij een modaal dialoogvenster de focus naar het venster. Houd de focus daar zolang het open is. Zet de focus bij het sluiten terug op de knop die het venster opende.
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 | Escape |
| Scrollen | ↑ (pijltje naar boven) en ↓ (pijltje naar beneden) |
Lees het artikel over toetsenbordtoegankelijkheid
Handige tips
- Zet bedieningselementen in de code in dezelfde volgorde als op het scherm.
- Gebruik geen tabindex met een positieve waarde.
- Zet content die na een klik verschijnt, zoals een submenu, in de code direct na de knop die de content opent.
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
Uitzonderingen
Geen uitzonderingen
Geldt alleen voor:
- pagina’s waar de volgorde van navigeren invloed heeft op de betekenis of de bediening
- navigeren met Tab en Shift + Tab, niet navigeren met de pijltoetsen binnen een bedieningselement (bijvoorbeeld een boomstructuur)
Testprocedure
Test 1: Focus volgorde
Statische content
- Verken de pagina met muis en toetsenbord
- Bepaal welke bedieningselementen er zijn:
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- Maatwerk bedieningselementen
- Bepaal welke elementen de focus kunnen krijgen (zie ook 2.1.1 Toetsenbord)
- Bepaal welke ankerlinks er zijn (links naar een plek op dezelfde pagina)
- Bepaal in welke volgorde de elementen visueel op de pagina staan
- Bepaal welke navigatievolgorde invloed heeft op de betekenis of de bediening
- Bepaal welke bedieningselementen er zijn:
- Herlaad de pagina
- Navigeer met Tab en Shift + Tab door de pagina en controleer:
- Of de focusvolgorde de betekenis en de bedienbaarheid behoudt
- Of de focus niet door elementen gaat die voor iedereen verborgen horen te zijn
- Test elke ankerlink met alleen het toetsenbord en controleer:
- Of de focusvolgorde na het activeren verdergaat vanaf het doel van de ankerlink
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
- Bepaal welke dynamische content er is:
- Herlaad de pagina
- Test elk gevonden element met alleen het toetsenbord en controleer:
- Bij een element dat uitvouwt of een niet-modaal dialoogvenster (bijvoorbeeld een accordeon of subnavigatie):
- Of de nieuwe content in de focusvolgorde direct na het activerende element komt
- Bij een groep tabbladen:
- Of de focusbare elementen in het tabpaneel in de focusvolgorde direct na de groep tabbladen komen
- Bij een carrousel:
- Of de focus na het wisselen van dia niet door bedieningselementen in verborgen dia’s gaat
- Bij een modaal dialoogvenster:
- Of de focus bij het openen naar het dialoogvenster gaat
- Of de focus de content achter het dialoogvenster niet bereikt zolang het open is
- Of de focus bij het sluiten teruggaat naar het activerende element of het element direct daarna
- Bij een element dat uitvouwt of een niet-modaal dialoogvenster (bijvoorbeeld een accordeon of subnavigatie):
Andere browser
- Herhaal stap 3, 4 en 7 in een andere browser
Belangrijk om te weten
- De focusvolgorde hoeft niet precies gelijk te zijn aan de visuele volgorde. Een afwijking is pas een fout als de betekenis of de bediening verandert.
- Bij een modaal dialoogvenster mag de focus ook naar de interface van de browser gaan, zoals de adresbalk.
Beoordeling
- De focusvolgorde moet de betekenis en de bedienbaarheid behouden
- De focusvolgorde moet niet door elementen gaan die voor iedereen verborgen horen te zijn
- Bij een ankerlink moet de focusvolgorde verdergaan vanaf het doel van de ankerlink
- Bij een element dat uitvouwt of een niet-modaal dialoogvenster moet de nieuwe content in de focusvolgorde direct na het activerende element komen
- Bij een groep tabbladen moet het tabpaneel in de focusvolgorde direct na de tabbladen komen
- Bij een modaal dialoogvenster moet de focus bij het openen naar het venster gaan, binnen het venster blijven tot het sluit en bij het sluiten teruggaan naar het activerende element of het element direct daarna