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 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 onverwacht 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 naar een ander deel van een formulier, dan snapt diegene niet bij welk onderdeel het veld hoort.
In HTML wordt de focus volgorde 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.
- Verander de volgorde van bedieningselementen niet alleen met CSS. Gebruik geen tabindex met 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 |
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
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 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, Shift + Tab en/of de pijltoetsen 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
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 ankerlinks er zijn
- Bepaal welke dynamische content er is:
- 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 het tabpaneel in de focusvolgorde direct na de tabbladen komt
- Bij een carrousel:
- Of de focus na het wisselen van dia niet door bedieningselementen in verborgen dia’s gaat
- Bij een ankerlink:
- Of de focusvolgorde na het activeren verdergaat vanaf het doel van de ankerlink
- Bij een modaal dialoogvenster:
- Of de focus bij het openen naar het dialoogvenster gaat
- Of de focus binnen het dialoogvenster blijft zolang het open is
- Of de focus bij het sluiten teruggaat naar het activerende element of een logische plek
- Bij een element dat uitvouwt of een niet-modaal dialoogvenster (bijvoorbeeld een accordeon of subnavigatie):
- Herhaal stap 3 en 5 in een andere browser
Beoordeling
- De focusvolgorde moet de betekenis en de bedienbaarheid behouden
- De focusvolgorde moet niet door elementen gaan die voor iedereen verborgen horen te zijn
- Dynamische content moet op een logische plek in de focusvolgorde komen
- Bij een ankerlink moet de focusvolgorde verdergaan vanaf het doel van de ankerlink
- 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