Succescriterium 2.4.7 Focus zichtbaar
Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.
Focus zichtbaar begrijpen (Engelstalig)
Alle elementen die de toetsenbordfocus krijgen, moeten een zichtbare focusindicator hebben. Een focusindicator laat zien welk element de focus heeft. Vaak is dat een rand om het element.
Mensen die het toetsenbord gebruiken, kunnen zo zien waar ze op de pagina zijn en weten welk element reageert als ze op Enter of de Spatie drukken.
De focus moet blijven staan zolang het element de focus heeft.
Hoe pas je dit toe?
- Zorg voor een zichtbare indicator van de toetsenbordfocus.
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 |
Focusindicator
De focus kan op verschillende manieren worden weergegeven. Dit zijn de meest voorkomende manieren:
- Rand of omlijning: Een zichtbare rand verschijnt rond het element.
- Onderstreping: Een dikke lijn wordt toegevoegd onder of naast het element.
- Kleurverandering: Een duidelijke verandering van tekst of achtergrond van het element.
- Toegevoegde iconen: Een symbool, zoals een pijl, verschijnt naast een element.
- Vetgedrukte of onderstreepte tekst: Tekst wordt opvallend en afwijkend opgemaakt.
- Caret: De knipperende verticale streep die in een invoerveld verschijnt. Of de tekst in het veld die wordt geselecteerd.
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 cognitieve beperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
Testprocedure
Test 1: Focusindicatoren
- Verken de pagina met muis en toetsenbord
- Bepaal welke bedieningselementen er zijn:
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Bepaal welke elementen de focus kunnen krijgen (zie ook 2.1.1 Toetsenbord)
- Bepaal of er elementen zijn die pas zichtbaar worden als ze de focus krijgen (bijvoorbeeld een skiplink)
- Bepaal welke bedieningselementen er zijn:
- Herlaad de pagina
- Navigeer met alleen het toetsenbord (Tab, Shift + Tab en de pijltoetsen) en controleer voor elk element dat de focus krijgt:
- Of het element zichtbaar is op het moment dat het de focus krijgt
- Of het element een zichtbare focusindicator heeft
- Of de focusindicator zichtbaar blijft zolang het element de focus heeft
- Of de focus niet direct van het element wordt weggehaald
- Herhaal stap 3 in een andere browser
Belangrijk om te weten
- De standaard browserindicator voldoet
- Is de focusindicator slecht te zien? Beoordeel op 1.4.11 Contrast van niet-tekstuele content
Beoordeling
- Bedieningselementen die de focus krijgen, moeten een zichtbare focusindicator hebben zolang ze de focus hebben
- Bedieningselementen die de focus krijgen, moeten zichtbaar zijn op het moment dat ze de focus krijgen
- De focus moet niet direct worden weggehaald van een bedieningselement dat de focus krijgt