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 bedieningselementen moeten een zichtbare indicator van de toetsenbordfocus hebben. Onder bedieningselementen vallen (onder andere) links, knoppen, formulierelementen en andere bedieningselementen.
Mensen die gebruik maken van het toetsenbord kunnen zich oriënteren op een webpagina als gemakkelijk te zien is welk element de toetsenbordfocus heeft. Gebruik daarom een duidelijk zichtbare indicator van de toetsenbordfocus. Vaak wordt deze indicator weergeven door een zichtbare rand rondom het element.
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) |
Focusindicator
De focus kan op verschillende manieren worden aangeduid. Dit zijn de meest voorkomende methoden:
- 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: Verticale streep die in een tekstinvoerveld verschijnt, of de tekst wordt geselecteerd
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?
- Vormgever
- Ontwikkelaar
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
Testprocedure
Bedieningselementen
- Verken de pagina met toetsenbord en muis
- Bepaal welke bedieningselementen er allemaal zijn
- Bepaal welke elementen allemaal de focus kunnen krijgen
- Gebruik nu toetsenbord (Tab, Shift + Tab en/of de pijltoetsen)
- Controleer of ieder element dat de focus krijgt een zichtbare focusindicator heeft
- Voor ieder bedieningselement waarbij de focusindicator alleen door kleurverandering wordt weergegeven:
- Controleer of het contrast tussen de gefocuste en niet-gefocuste toestand minimaal 3:1 is
- Herhaal stap 2 en 3 in een andere browser
Beoordeling
- Alle elementen die focus krijgen moeten een zichtbare focusindicator hebben
- Alleen als de focusindicator alleen door kleurverandering wordt weergegeven:
- Het contrast tussen de gefocuste en niet-gefocuste toestand moet minimaal 3:1 zijn