Toetsenbordnavigatie

Interacties checklist

1. Alles wat een muisgebruiker kan doen qua interacties moet beschikbaar zijn voor toetsenbord navigatie. Als je je interactieve elementen vanaf het begin eerst voor toetsenbordnavigatie maakt, dan werkt het ook met muis.
2. Als het iets nieuws opent, moet het met Escape gesloten kunnen worden
3. Als het scrollbaar is, moet het met de omhoog/omlaag toetsen werken
4. Als het een pop-up opent, mag toetsenbord navigatie alleen binnen de pop-up zelf mogelijk zijn (focus trap of inert)

Zichtbare focus outline

Iedere browser heeft verschillende focus stijlen die automatisch goed werken, als je HTML5 semantisch is. Deze past niet altijd bij de branding van een site. Maak je een eigen versie? Dan moet die voldoen aan deze eisen:

1. Het omringt het hele element
2. Moet een contrast ratio hebben van 3:1 met de pixels aan de binnen- en buitenkant
3. De lijn moet minimaal 0.6rem breed zijn

Voor uitgebreide voorbeelden en adviezen, lees het artikel van Sara Soueidan; “A guide to designing accessible, WCAG-compliant focus indicators”.