Toetsenbordnavigatie

Doe je ogen dicht voor het eerste gedeelte. Doe alsof je de pagina voor het eerst waarneemt. De webpagina moet volledig te begrijpen zijn. De structuur moet duidelijk zijn en ook de acties die je kunt uitvoeren.

Activeren

Windows

Met Ctrl + Windows + Enter zet je snel de verteller aan en uit. Op het verteller scherm kan je uitvinken dat steeds het verteller overzicht wordt geopend, zodat je snel kan switchen. De verteller werkt zo:

  • Pijltjes om te navigeren
  • P / Shift + P om te wisselen tussen statische en interactieve elementen, zoals tekst
  • Tab / Shift + Tab om de wisselen tussen interactieve elementen
  • Enter om een actie uit te voeren
  • Spatie om een interactief element te toggelen

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

Doe je ogen weer open voor dit gedeelte. Check of de outline/focus-ring duidelijk zichtbaar is. Als je de focus-ring niet ziet, dan is het niet duidelijk waar je bent op de pagina. Dit is een probleem voor mensen die met een toetsenbord navigeren.

A guide to designing accessible, WCAG-compliant focus indicators -- Sara Soueidan, inclusive design engineer

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. Wordt er een aangepaste versie gebruikt? Dan moet die voldoen aan deze eisen:

  1. Het omringt het hele element of enkele kanten
    • De lijn moet minimaal 0.065rem (1px) breed zijn om het hele element
    • Is het slechts enkele kanten, dan moet er een 0.25rem (4px) brede lijn zijn aan een de kant(en)
  2. Moet een contrast ratio hebben van 3:1 met de pixels aan de binnen- en buitenkant