Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung
Toegankelijkheid
Waarom moet de toetsbordnavigatie op een website zichtbaar zijn?
De toetsbordnavigatie moet zichtbaar zijn, anders sturen toetsenbordgebruikers blind: zonder zichtbare markering — meestal een gekleurde rand om het actieve element — is niet duidelijk welk element nu is geselecteerd en wat Enter volgende moment zou activeren. Veel ontwerpers verwijderen deze rand om visuele redenen en sluiten zo toetsenbordgebruikers uit. WCAG-criterium 2.4.7 vereist zichtbare focusweergave.
De focusrand is de muisaanwijzer van het toetsenbord
Muisgebruikers zien altijd waar hun aanwijzer staat. Toetsenbordgebruikers hebben daarvoor de focusrand: deze verplaatst zich met elke druk op Tab naar het volgende element en toont wat Enter zou activeren. Verdwijnt deze rand, wordt bediening gokwerk — als muisbediening met onzichtbare aanwijzer. De meest voorkomende oorzaak is een enkele regel in de opmaakrichtlijnen die de standaardrand van de browser uitschakelt, omdat die als storend werd ervaren. De juiste oplossing is nooit verwijdering, maar opmaak: een rand in uw huisfkleur, sterk genoeg om op elke achtergrond op te vallen.
Zo meet de controledienst focuszichtbaarheid per pixelvergelijking
De controledienst fotografeert elk gecontroleerd bedienelement twee keer: eenmaal zonder, eenmaal met focus. Dan vergelijkt het beide opnamen pixel voor pixel. Verandert de focus minder dan 0,2 procent van de pixels in de omgeving van het element, dan is de focusweergave praktisch onzichtbaar — het criterium geldt als overtreden, en het rapport noemt het betrokken element plus screenshot als bewijs. Onrustige omgevingen, bijvoorbeeld door animaties, herkent de meting aan een voorafgaande vergelijking van twee opnamen zonder focus en neemt dergelijke elementen uit de beoordeling. Bovendien noteert het rapport wanneer opmaakrichtlijnen focusranden pauschal uitschakelen.
Voorbeelden
Focusframe verwijderd
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }overzicht: geen maakt de toetsenbordbewerking blind.:focus-visible toont het frame alleen bij toetsenbord, niet bij muisklik.
- Tab door uw startpagina en observeer: is het bij elke halte duidelijk welk element nu is geselecteerd?
- Vraag uw bureau elke regel te verwijderen die focusomtrekken pauschal uitschakelt.
- Laat een vormgegeven focusrand in uw huiskleur definiëren — sterk genoeg voor lichte en donkere achtergronden.
- Controleer focus ook op afbeeldingen en gekleurde gebieden — een dunne grijze rand verdwijnt daar snel.
