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 focusindicator moet zichtbaar blijven zolang het element de focus heeft. Hij mag niet na een paar seconden verdwijnen.
Het gaat om de focus die je met het toetsenbord verplaatst. Klik je met de muis op een element, dan hoeft de focusindicator niet zichtbaar te zijn.
Hoe pas je dit toe?
- Gebruik de standaard focusindicator van de browser, of maak een eigen focusindicator die goed te zien is.
- Haal de standaard focusindicator niet weg met
outline: none, tenzij je een eigen focusindicator toevoegt. - Gebruik
:focus-visiblein plaats van:focusals je de focusindicator alleen wilt tonen bij toetsenbordgebruik.
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) |
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.
- Lijn: 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, tekstgebieden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Maatwerk bedieningselementen
- 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 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
- Bij een element dat pas zichtbaar wordt als het de focus krijgt:
- Of het element zichtbaar wordt zodra het de focus krijgt
- 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.
- Een element dat volledig wordt bedekt door andere content van de website (bijvoorbeeld een sticky header of cookiemelding), valt onder 2.4.11 Focus niet bedekt (minimum).
- Krijgt een element de focus dat voor iedereen verborgen hoort te zijn (bijvoorbeeld een link in een gesloten menu of een knop in een verborgen dia)? Beoordeel op 2.4.3 Focusvolgorde.
Beoordeling
- Elementen die de focus krijgen, moeten een zichtbare focusindicator hebben zolang ze de focus hebben
- Bij een element dat pas zichtbaar wordt als het de focus krijgt, moet het element zichtbaar worden zodra het de focus krijgt
- De focus moet niet direct worden weggehaald van een element dat de focus krijgt