Een contactformulier met alleen het toetsenbord testen

Open het formulier op de live pagina of in een testomgeving die er identiek uitziet. Gebruik een gewone browser, leg je muis weg en zet een notitieblad klaar met vier kolommen: stap, toets, verwachting, waarneming. Gebruik een fictief testadres en een duidelijk herkenbare testtekst, zodat de ontvanger weet dat het geen echte aanvraag is.

Bepaal vooraf wat je test: alleen het formulier, of ook de weg ernaartoe vanaf het menu, de cookiebanner en de bevestigingspagina. Voor een kmo is dat laatste meestal het nuttigst, want een aanvraag kan al mislukken vóór het eerste veld.

Let op de grenzen. Een toetsenbordtest toont zichtbare gedragsproblemen in één browser op één apparaat. Hij bewijst geen volledige toegankelijkheid, vervangt geen test met een schermlezer en zegt niets over wettelijke naleving. Noteer bij je bevindingen daarom altijd browser, apparaat en datum.

Begin bovenaan de pagina en druk herhaaldelijk op Tab. Noteer bij elk stoppunt welk element de focus heeft en of je dat kunt zien.

1. Tel de stops tot en met de verzendknop. Zit er een element tussen dat niet bij het formulier hoort, zoals een zwevende chatknop, schrijf dat op.
2. Vergelijk de tabvolgorde met de volgorde op het scherm. Springt de focus van voornaam naar e-mailadres terwijl achternaam ertussen staat, dan wijkt de volgorde in de code af van wat je ziet.
3. Controleer of de focusmarkering zichtbaar blijft. Een veld waarvan je niet ziet dat het actief is, telt als fout, ook al werkt het.
4. Ga terug met Shift+Tab en bevestig dat de volgorde omgekeerd klopt.
5. Test keuzelijsten, keuzerondjes en selectievakjes met pijltjestoetsen en spatie. Noteer afwijkingen van wat je bij een standaardveld verwacht.

Let ook op focusvallen. Kom je niet meer weg van een element, bijvoorbeeld een datumkiezer of een ingesloten kaart, dan is dat een blokkerende fout.

Het toetsenbord laat labels niet rechtstreeks zien, maar je kunt ze indirect testen. Doe als korte extra controle een muisklik op de labeltekst: krijgt het bijbehorende veld de focus, dan is het label waarschijnlijk correct gekoppeld. De formuliertutorial van het W3C (https://www.w3.org/WAI/tutorials/forms/) noemt het label-element als basis voor elk veld, fieldset en legend om verwante velden te groeperen en duidelijke instructies bij het invullen.

Controleer daarom per veld:

• Staat er een zichtbare labeltekst, of alleen een placeholder die verdwijnt zodra je typt?
• Staat de uitleg over een verwacht formaat, zoals een telefoonnummer, vóór het veld en niet pas in de foutmelding?
• Zijn verplichte velden herkenbaar gemarkeerd, en leg je dat uit boven het formulier?
• Hoort een groep keuzes bij één vraag, en staat die vraag dan als legend boven de groep?
• Verloopt de sessie na een tijd? Volgens de bron horen formulieren bij voorkeur geen tijdslimiet te hebben, of moet de gebruiker die kunnen uitzetten of verlengen.

Verstuur het lege formulier eerst met Enter in een veld, daarna via de verzendknop met Enter en met spatie. Noteer bij elk geval wat er gebeurt: verschijnt er een melding, waar staat die, en waar staat de focus daarna? Een foutmelding die alleen bovenaan een lange pagina verschijnt terwijl de focus op de knop blijft, laat toetsenbordgebruikers raden.

Vul vervolgens bewust één veld fout in, bijvoorbeeld een e-mailadres zonder apenstaartje. De MDN-uitleg over validatie (https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation) beschrijft validatie aan de clientzijde als eerste controle voor gebruiksgemak, niet als beveiliging: de server moet de gegevens ook controleren. Vraag je webbouwer dus welke controles op de server bestaan, want die kun je met alleen een toetsenbord niet bewijzen.

Verstuur tot slot een geldig testbericht. Controleer of de bevestiging zichtbaar is, of de focus logisch staat en of een tweede druk op Enter geen dubbele aanvraag veroorzaakt. Doe dat laatste alleen in een testomgeving of met een duidelijk herkenbaar testadres, en vraag de webbouwer of een herhaalde verzending dezelfde aanvraag twee keer opslaat (idempotentie). Een trage of mislukte bevestiging bewijst niet dat er niets is opgeslagen.

Een goede foutenlijst beschrijft wat je deed, wat je zag en wat je verwachtte, zonder de oorzaak te raden. Geef elke bevinding één ernstniveau: blokkerend (verzenden lukt niet), hinderlijk (lukt wel, maar onduidelijk) of verbetering.

Een fictief voorbeeld van één regel in je lijst, met alleen invoer en verwachte controle: Stap 7, toets Tab vanaf veld Bericht. Verwachting: focus gaat naar de verzendknop. Waarneming: focus gaat naar een cookielink onderaan de pagina en de knop wordt overgeslagen. Browser en apparaat: noteer je eigen gegevens. Ernst: blokkerend. De webbouwer weet dan welke stap hij moet herhalen en wat hij moet zien.

Laat na de aanpassing dezelfde test opnieuw uitvoeren in dezelfde browser, en voeg daarna minstens één andere browser of een mobiel toetsenbord toe. De cursus Learn Forms van web.dev (https://web.dev/learn/forms) bevat modules over het testen van formulieren op bruikbaarheid en over verschillende apparaten en platformen, handig als je de test wilt uitbreiden. Beloof niemand dat het formulier na één ronde volledig toegankelijk is.

Wil je ook zien welke publieke signalen je website uitstuurt rond conversie? Bekijk ze via Marketing Scan. Een publieke scan meet zichtbare signalen en vervangt je handmatige toetsenbordtest niet.