Uw website bruikbaar maken met alleen een toetsenbord

• Alles bereikbaar. Elke link, knop, veld en elk interactief onderdeel is met het toetsenbord te bereiken en te bedienen (criterium 2.1.1).
• Geen val. Komt de focus ergens in, dan kan hij er ook weer uit. Een onderdeel dat de focus gevangen houdt, heet een keyboard trap (2.1.2).
• Logische volgorde. De focus loopt in een volgorde die past bij de betekenis van de pagina, meestal van boven naar beneden en van links naar rechts (2.4.3).
• Zichtbare focus. U ziet altijd waar de focus staat (2.4.7). Het onderwerp krijgt een eigen artikel: waarom de focusrand moet blijven.
• Niet verstopt. In WCAG 2.2 kwam erbij dat het element met focus niet volledig achter een vaste header, chatknop of cookiebalk mag verdwijnen (2.4.11).
• Een snelle route naar de inhoud. Een manier om herhalende blokken, zoals een groot menu, over te slaan (2.4.1).

Loop daarna deze vijf punten langs op uw homepage en één belangrijke pagina, zoals uw contactpagina:

1. Laad de pagina en druk één keer op Tab. Verschijnt er een link "Naar de inhoud"? Dat is de skip-link. Ontbreekt hij, lees dan hoe u een skip-link toevoegt.
2. Tab door het menu. Ziet u bij elke stap een duidelijke rand of markering? Gaan submenu's open met Enter of de spatiebalk?
3. Ga door naar de inhoud. Springt de focus logisch, of ineens naar de footer en weer terug?
4. Open iets dat over de pagina heen komt, zoals de cookiebanner, een pop-up of het mobiele menu. Gaat de focus erin, en kunt u het met Escape sluiten?
5. Vul het contactformulier in en verstuur het, zonder muis.

Lukt een van deze stappen niet, dan heeft een deel van uw bezoekers hetzelfde probleem. Wilt u een bredere zelftest, met zoom, contrast en koppen erbij, dan vindt u die bij toegankelijkheid zelf testen in een half uur.

Weggepoetste focus

Een ontwerper vond de rand rond een aangeklikte knop lelijk, en een regel CSS haalt hem overal weg. Het gevolg: wie met het toetsenbord werkt, navigeert blind. De oplossing is een focusstijl die bij de huisstijl past en alleen verschijnt bij toetsenbordgebruik:

:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

Menu's die alleen met de muis werken

Submenu's die openklappen bij hover en niet bij focus. Of een hamburgerknop die eigenlijk een <div> is en daardoor geen focus kan krijgen.

Pop-ups zonder focusafhandeling

Een venster opent, maar de focus blijft op de pagina erachter. De bezoeker tabt door onzichtbare links en weet niet dat er een pop-up openstaat. Omgekeerd kan een venster de focus vastzetten zonder sluitknop die bereikbaar is. Hoe het wel moet, staat in pop-ups en modale vensters toegankelijk maken.

Klikbare elementen die geen knop zijn

Een kaart, een uitklapkop of een filter die met JavaScript klikbaar is gemaakt, maar geen echte knop of link is. Met de muis werkt het, met Tab komt u er nooit.

Ingesloten onderdelen

Een kaart van een externe dienst, een chatvenster of een video kan de focus opslokken. De cookiebanner verdient een aparte vermelding, omdat hij op elke pagina als eerste verschijnt; daarover gaat een toegankelijke cookiebanner.

1. Doorlopen per sjabloon. Wij tabben door header, menu, footer en elk paginatype, op desktop en in de mobiele weergave, en noteren elke plek waar het misgaat.
2. Bron zoeken. Per probleem bepalen wij of het in het thema, de page builder, een plugin of in de inhoud zit.
3. Repareren aan de bron. Een focusstijl in het childthema, echte knoppen in plaats van klikbare divs, focusafhandeling in pop-ups en menu's. Waar een plugin niet te repareren is, stellen wij een alternatief voor.
4. Hertesten. Na het herstel lopen wij dezelfde route opnieuw, en daarna ook met een screenreader, omdat die op dezelfde basis leunt. Meer daarover op testen met een screenreader.

Na een eerste beoordeling krijgt u een vaste prijs voor dit werk. Staat de toetsenbordbediening in een breder rapport, dan pakken wij het mee in het herstel van de hele site.

• Doe de vijfminutentest na elke grote update of nieuwe plugin. Het is de snelste manier om nieuwe problemen te vangen.
• Vraag uw ontwerper of bouwer nooit om "dat blauwe randje" weg te halen. Vraag om een mooiere versie.
• Voeg geen klikbare blokken toe via een builder zonder te controleren of ze met Tab bereikbaar zijn.
• Zet pop-ups niet automatisch aan bij het laden van de pagina.

Toetsenbordbediening is de basis waar veel andere hulpmiddelen op voortbouwen. Hoe dit past in het geheel, leest u op toegankelijk maken volgens WCAG 2.2.