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, tekstgebieden, 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
- Mediaspelers
- Bepaal welke dynamische content er is:
- Herlaad de pagina
- Test elk gevonden element met alleen het toetsenbord en controleer:
- 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
- Bij een groep tabbladen:
- Controleer voor elk element dat uitvouwt en elk niet-modaal dialoogvenster of minstens één van de volgende waar is:
- Of de nieuwe content in de focusvolgorde direct na het activerende element komt
- Of de focus bij het openen naar de nieuwe content gaat, bij een niet-modaal dialoogvenster of een subnavigatie
- Controleer voor elk dialoogvenster en elke subnavigatie die vanuit de nieuwe content wordt gesloten, of minstens één van de volgende waar is:
- Of de focus teruggaat naar het activerende element
- Of de focus naar het element direct na het activerende element gaat, bij een modaal dialoogvenster
- Of de focus naar een andere logische plek in de taak gaat als het activerende element bij het sluiten is verdwenen (bijvoorbeeld naar het volgende item in een lijst)
Andere browser
- Herhaal stap 3, 4 en 7 tot en met 9 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.
- Een element zonder functie, zoals een kop of een alinea, mag de focus krijgen. Dat is pas een fout als de focusvolgorde daardoor verwarrend wordt of de bediening verandert.
- Bij een modaal dialoogvenster mag de focus ook naar de interface van de browser gaan, zoals de adresbalk.
- Een skiplink die zichtbaar wordt zodra die de focus krijgt, is niet verborgen in de zin van deze test.
- De eis dat de focusvolgorde na het activeren van een ankerlink verdergaat vanaf het doel, staat niet letterlijk in WCAG. De eis volgt uit het doel van 2.4.3: de focusvolgorde behoudt de bedienbaarheid. Gaat de focusvolgorde verder vanaf de ankerlink zelf, dan springt de focus bij de volgende Tab naar een plek die niet meer zichtbaar is.
- De eis dat de focusvolgorde niet door elementen gaat die voor iedereen verborgen horen te zijn, staat niet letterlijk in WCAG. De eis volgt uit de Understanding-tekst: de focus mag niet onverwacht of willekeurig over de pagina springen. Een focus op een onzichtbaar element lijkt voor een ziende toetsenbordgebruiker op een verdwenen focus.
- De eis dat de focusbare elementen in het tabpaneel in de focusvolgorde direct na de groep tabbladen komen, staat niet letterlijk in WCAG. De eis volgt het tabbladenpatroon uit de ARIA Authoring Practices Guide (APG). Een tabpaneel op een andere plek in de focusvolgorde verliest bijna altijd de relatie met de tabbladen (en daarmee de betekenis of de bedienbaarheid).
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
- Voor alle elementen die uitvouwen en alle niet-modale dialoogvensters moet minstens één van de volgende zaken gelden:
- De nieuwe content komt in de focusvolgorde direct na het activerende element
- Alleen bij niet-modale dialoogvensters en subnavigaties: de focus gaat bij het openen naar de nieuwe content
- Bij een groep tabbladen moeten de focusbare elementen in het tabpaneel in de focusvolgorde direct na de groep tabbladen komen
- Bij een modaal dialoogvenster moet de focus bij het openen naar het dialoogvenster gaan en de content achter het dialoogvenster niet bereiken zolang het open is
- Voor alle dialoogvensters en subnavigaties die vanuit de nieuwe content worden gesloten, moet minstens één van de volgende zaken gelden:
- De focus gaat terug naar het activerende element
- Alleen bij modale dialoogvensters: de focus gaat naar het element direct na het activerende element
- Alleen bij een activerend element dat bij het sluiten is verdwenen: de focus gaat naar een andere logische plek in de taak