Focusindicators
Een toetsenbordgebruiker gebruikt gewoonlijk de tab-toets om door interactieve elementen (links, knoppen, velden voor het invoeren van tekst, enz.) op een webpagina te navigeren. Wanneer er naar een item wordt getabt, heeft het toetsenbordfocus en kan het item worden geactiveerd of bewerkt met het toetsenbord.
Een ziende gebruiker moet volgens de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) kunnen zien welk element op dat moment toetsenbordfocus heeft.
đź’ˇ Opmerking: focusindicatoren worden automatisch aangeboden door webbrowsers. Hoewel hun uiterlijk varieert afhankelijk van de browser, wordt het meestal weergegeven als een rand of markering (ook wel outline genoemd) rond het gefocuste element.
Problemen
Problemen op dit gebied worden vooral veroorzaakt door twee zaken:
- de focusindicator is uitgeschakeld door
outline:0ofoutline:nonein de CSS-code. Dit is een inbreuk op criterium 2.4.7 Focus zichtbaar. - de indicator is aanwezig, maar heeft niet voldoende contrast (contrast met de achtergrond dient minstens een verhouding te hebben van 3:1). Dit is een inbreuk op criterium 1.4.11 Contrast van niet-tekstuele content.
- een element dat focus krijgt, verandert alleen van kleur en krijgt geen rand. Bijvoorbeeld een blauwe knop die bij focus groen wordt. Dit is een inbreuk op 1.4.1 Gebruik van kleur.
đź’ˇ Opmerking: in een update van WCAG die eraan komt (WCAG 2.2) komen er extra succescriteria bij die met focus te maken hebben. Verdiep je in wat je binnenkort over focus in WCAG 2.2 kunt verwachten.
Conclusie
Vermijd outline:0 of outline:none of andere stijlen die de zichtbaarheid van focusindicatoren verwijderen of beperken.
Leunen op de standaard indicatoren die browsers bieden wordt niet geadviseerd. De kleur kan contrastproblemen veroorzaken bij gekleurde achtergronden. En als een standaard outline voldoende contrast biedt, kan dit na een update van de browser ineens weer anders zijn. Plus dat het heel lastig wordt om in alle browsers een voldoende te scoren op contrast, omdat per browser de kleur licht kan verschillen. Op welk besturingssysteem een browser wordt gebruikt, kan ook verschil maken. Het is dus beter om zelf een kleur te vast te leggen in CSS.
Ik raad aan om in de CSS de focusindicator vet te maken (minimaal 2 px dik) in een kleur die voldoende contrast biedt. Ook moet de indicator het element dat focus heeft helemaal omringen.
👉️ Opmerkingen? Vragen? Iets onduidelijk of onvolledig? Of vond je het helemaal geweldig? Stuur me een mailtje met je feedback!
Credits
Deze pagina is grotendeels gebaseerd op een vertaling van WebAim’s pagina over toegankelijkheid met het toetsenbord.