Toetsenbordtoegankelijkheid

Toetsenbordtoegankelijkheid betekent dat elke actie die een gebruiker op een pagina kan uitvoeren, uitsluitend met het toetsenbord mogelijk is. Het is de meest ononderhandelbare toegankelijkheidseis: zonder toetsenbordtoegankelijkheid werkt geen enkele andere hulptechnologie.

Het toetsenbordinterface is het universele interface

Schermlezers, schakelbesturing, stembesturing, oogtracking — elke hulptechnologie die op het web wordt gebruikt, loopt uiteindelijk via de toetsenbordlaag. Een gebruiker zonder motorische beperking hoeft nooit op Tab te drukken, maar dezelfde site moet volledig bedienbaar zijn op die manier zodat gebruikers met een beperking er gebruik van kunnen maken.

Daarom is 2.1.1 Keyboard een Level A-succescriterium: wie hieraan niet voldoet, maakt de site niet moeilijker maar volledig onbruikbaar voor hele gebruikersgroepen.

Wat “toetsenbordoperabel” in de praktijk vereist

• Tab en Shift+Tab verplaatsen de focus vooruit en achteruit door interactieve elementen.
• Enter activeert links en de meeste knoppen.
• Spatie activeert knoppen en schakelt selectievakjes/keuzerondjes om.
• Pijltjestoetsen navigeren binnen samengestelde widgets (tabpanelen, menu’s, radiogroepen, lijstboxen, schuifregelaars).
• Escape sluit modale dialoogvensters, popovers en uitklapmenu’s.
• Page Up/Down, Home/End navigeren door lange inhoud waar de platformconventie van toepassing is.

Een widget die het toetsenbordcontract niet implementeert dat schermlezers op basis van de rol verwachten — bijvoorbeeld een ARIA-combobox die reageert op klikken maar niet op pijltjestoetsen — is technisch focusbaar maar functioneel gebroken.

De snelste handmatige audit

Tab door een pagina van helemaal bovenaan (focus op de adresbalk, dan Tab) tot aan de voettekst. De tabvolgorde moet overeenkomen met de visuele volgorde. Elk klikbaar element moet precies één keer focus ontvangen. Het indrukken van Enter of Spatie op een gefocust element moet hetzelfde resultaat opleveren als erop klikken. Escape indrukken in een modaal venster moet het sluiten. Als iets onbereikbaar is, iets in de verkeerde volgorde wordt bereikt of iets de focus vasthoudt, zijn dat bugs.

Vijf minuten gedisciplineerd navigeren met Tab vindt meer toegankelijkheidsproblemen dan vijftien minuten scannen met axe-core.

Veelvoorkomende foutpatronen

• <div onclick> voor klikbare kaarten. Niet focusbaar, niet activeerbaar met het toetsenbord, volledig onzichtbaar voor schermlezers als interactief element. Gebruik <button> (voor acties) of <a href> (voor navigatie).
• Aangepaste uitklapmenu’s die niet openen op Enter/Spatie. Gebouwd met alleen klikhandlers; toetsenbordgebruikers kunnen de trigger focussen maar de lijst niet openen.
• Modale dialoogvensters die focus niet vasthouden. Tab verplaatst de focus buiten het modaal venster naar de (visueel verborgen) pagina erachter. Gebruikers zien niet waar ze zijn.
• Modale dialoogvensters die focus te strak vasthouden. Escape sluit niet. De gebruiker zit vast.
• Skip-link-doel niet focusbaar. De skip-link springt naar #main, maar <main id="main"> mist tabindex="-1", waardoor de focus niet echt verplaatst en de volgende Tab weer bovenaan de pagina begint.

Twee bibliotheken zijn het waard te kennen: focus-trap voor het beheren van focus in modale vensters, en tabbable voor het vinden van focusbare elementen binnen een container. Beide zijn klein en onopinioneerd.