HTMLhulp.nl logo
Formulieren toetsenbordvriendelijk maken in HTML

Formulieren toetsenbordvriendelijk maken in HTML

Formulieren toetsenbordvriendelijk maken in HTML

Formulieren zijn een van de belangrijkste onderdelen van een website. Of het nu gaat om een contactformulier, een bestelling in een webshop of een loginpagina: gebruikers moeten ze eenvoudig en betrouwbaar kunnen invullen. Veel mensen doen dat met een muis of touchscreen, maar er is ook een grote groep die volledig afhankelijk is van het toetsenbord. Als je formulier dan niet goed werkt, loop je gebruikers en klanten mis. In dit artikel leer je hoe je formulieren toetsenbordvriendelijk maakt met HTML, en welke technieken je kunt toepassen om iedereen een goede ervaring te bieden.

Waarom toetsenbordvriendelijke formulieren belangrijk zijn

  • Toegankelijkheid: mensen met motorische of visuele beperkingen navigeren vaak volledig met een toetsenbord.

  • Efficiëntie: ook power users en programmeurs werken sneller met toetsenbordshortcuts.

  • WCAG-richtlijnen: volgens internationale standaarden moet alle functionaliteit van een website beschikbaar zijn via het toetsenbord.

  • Conversie: een frustrerend formulier zorgt voor afhakers, een soepel formulier voor meer voltooide inzendingen.

Basis: Tab-volgorde in HTML

Browsers bepalen automatisch de volgorde van focusbare elementen met de Tab-toets. Standaard zijn deze elementen focusbaar:

  • Links (<a href="...">)

  • Formuliervelden (<input>, <select>, <textarea>)

  • Knoppen (<button>, <input type="submit">)

Als je formulier logisch is opgebouwd in HTML, volgt de Tab-toets die volgorde automatisch.

Voorbeeld:

<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam">

<label for="email">E-mail</label>
<input type="email" id="email" name="email">

<button type="submit">Verstuur</button>
</form>

Met Tab ga je van Naam → E-mail → Verstuur.

Het gebruik van tabindex

Met het attribuut tabindex kun je de tabbalkvolgorde aanpassen.

  • tabindex="0": element wordt focusbaar en volgt de normale volgorde.

  • tabindex="-1": element wordt niet met Tab bereikt, maar kan wel met JavaScript gefocust worden.

  • tabindex="1" of hoger: plaatst een element eerder in de volgorde. Dit kan verwarrend zijn en wordt afgeraden.

Voorbeeld:

<input type="text" id="zoek" tabindex="1">
<button tabindex="2">Zoeken</button>

Gebruik dit alleen als het echt nodig is. Beter is je HTML logisch opbouwen.

Duidelijke focusstijlen

Een toetsenbordgebruiker moet altijd kunnen zien waar de focus staat. Verberg daarom nooit de standaard focusstijl met outline: none zonder alternatief.

:focus {
outline: 3px solid #00bf63;
outline-offset: 2px;
}

Zo zie je duidelijk welk veld of welke knop actief is.

Labels koppelen aan velden

Zonder labels is een formulier onduidelijk voor schermlezers én lastig te gebruiken met het toetsenbord.

<label for="telefoon">Telefoonnummer</label>
<input type="tel" id="telefoon" name="telefoon">

Klikken op het label plaatst de focus direct in het invoerveld, wat de bediening eenvoudiger maakt.

Groeperen met <fieldset> en <legend>

Bij groepen radio buttons of checkboxes helpt een <fieldset> met een <legend> om context te bieden.

<fieldset>
<legend>Kies je verzendmethode</legend>
<input type="radio" id="standaard" name="verzending">
<label for="standaard">Standaard</label>

<input type="radio" id="express" name="verzending">
<label for="express">Express</label>
</fieldset>

Een screenreader leest: “Kies je verzendmethode. Groep met 2 opties.”

Toetsenbordbediening van radio’s en checkboxes

  • Spatiebalk: selecteert of deselecteert een checkbox.

  • Pijltjestoetsen: bewegen tussen radio-opties binnen dezelfde groep.

Zorg dat deze standaardfuncties blijven werken. Bij custom styling moet je dit soms met JavaScript herstellen.

Toetsenbordvriendelijke foutmeldingen

Wanneer een foutmelding verschijnt, moet die ook bereikbaar en begrijpelijk zijn voor toetsenbordgebruikers.

<label for="email">E-mailadres</label>
<input type="email" id="email" aria-describedby="error-email" required>
<span id="error-email" class="error">Voer een geldig e-mailadres in.</span>

De foutmelding is gekoppeld via aria-describedby en wordt door schermlezers direct voorgelezen.

Skip-links in formulieren

Voor lange formulieren kan het handig zijn om een skip-link toe te voegen die direct naar de submitknop springt.

<a href="#verstuur" class="skip-link">Direct naar verzenden</a>
<button id="verstuur" type="submit">Verstuur</button>

Toetsenbordgebruikers hoeven dan niet door tientallen velden te tabben.

Custom elementen en ARIA

Soms wil je eigen formulieren bouwen met custom elementen. Als je dat doet, moet je extra aandacht besteden aan ARIA-attributen en keyboard-events.

Voorbeeld custom dropdown:

<div role="listbox" tabindex="0" aria-label="Kies een land">
<div role="option" aria-selected="true">Nederland</div>
<div role="option">België</div>
<div role="option">Duitsland</div>
</div>

Met JavaScript moet je pijltjestoetsen, Enter en Spatie correct afhandelen. Waar mogelijk zijn native elementen zoals <select> beter.

Praktisch voorbeeld: toegankelijk formulier

<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" required>

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" required aria-describedby="email-help">
<small id="email-help">We gebruiken je e-mail alleen om contact op te nemen.</small>

<fieldset>
<legend>Nieuwsbrief ontvangen?</legend>
<input type="radio" id="ja" name="nieuwsbrief" value="ja">
<label for="ja">Ja</label>
<input type="radio" id="nee" name="nieuwsbrief" value="nee">
<label for="nee">Nee</label>
</fieldset>

<button type="submit">Verstuur</button>
</form>

Met labels, fieldsets en duidelijke focusstijlen is dit formulier vloeiend met het toetsenbord te bedienen.

Veelgemaakte fouten bij formulieren

  1. Alleen visuele feedback geven, geen koppeling met screenreaders.

  2. Focus verbergen zonder alternatief.

  3. Formulieren te complex maken met custom elementen zonder ARIA.

  4. Foutmeldingen los in de tekst plaatsen in plaats van gekoppeld aan velden.

  5. Geen logische tabbalkvolgorde gebruiken.

Tips voor toetsenbordvriendelijke formulieren

  • Bouw formulieren altijd op met native HTML-elementen.

  • Voeg duidelijke labels toe en groepeer waar nodig.

  • Zorg dat de Tab-volgorde logisch is.

  • Test met toetsenbord: Tab, Shift+Tab, Enter en Spatie.

  • Gebruik aria-attributen voor extra context waar nodig.

Een toetsenbordvriendelijk formulier is vaak ook eenvoudiger, overzichtelijker en beter te gebruiken door iedereen.