12. Toegankelijke formulieren, introductie

Waar we in dit e-book naar kijken is of een formulier gebruikt kan worden door mensen die een functiebeperking, zoals mensen die blind zijn of een beperkte handfunctie hebben (denk bijvoorbeeld aan mensen met Parkinson).

Omslag van ''

12.1 Soorten formulieren

Voorbeelden van formulieren zijn:

  1. Een eenvoudig contactformulier met enkele velden
  2. Een winkelwagentje in een online shop
  3. Een zoekfunctie op een website

12.2 Technische opbouw formulier

De HTML van een formulier ziet er bijvoorbeeld zo uit:

<form> <p>Voornaam *: <input type="text" name="fname"></p> [Enzovoort] <input type="submit" value="Bericht versturen"> </form>

Wat zie je nu precies met deze HTML-code?

  • Een <form>-element
  • Een beschrijving bij elk invoerveld, bijvoorbeeld 'Voornaam'
  • Eén of meerdere invoervelden:
    • Soort invoerveld, bijvoorbeeld <input>
    • Het attribuut name. Met deze naam wordt het invoerveld opgeslagen.
    • Het type invoerveld, bijvoorbeeld text of submit
    • Een verzendknop

12.3 Toegankelijke naam

Qua toegankelijkheid zijn we er dan nog niet helemaal. Als iemand dit formulier met een schermlezer gebruikt, dan is niet duidelijk dat 'Voornaam' gekoppeld is aan het invoerveld (input). Het invoerveld zelf heeft geen naam.

Voor toegankelijkheid is het nodig dat elk invoerveld een zogenaamde toegankelijke naam (accessible name) heeft.

Dat kan voor een input-veld door een label te maken met ‘for’ en deze via een ‘id’ te koppen aan het invoerveld:

<label for="q">Jouw vraag</label> <input id="q" name="vraag" type="text">

Voor veel invoervelden is deze for-id-koppeling de manier om een invoerveld te koppen aan de beschrijving (het label).

Het op deze manier koppelen van de beschrijving aan het invoerveld heeft nog meer voordelen:

  1. Je komt direct in het invoerveld door op het label kan klikken. Dit is handig op mobiele schermen en voor mensen met motorische beperkingen.
  2. Je checkt zo snel en eenvoudig of de formuliervelden goed zijn gekoppeld.

12.4 Juiste tabvolgorde

Het is belangrijk dat de volgorde van de velden bij het tabben gelijk is aan de visuele volgorde.

De volgorde bij het tabben is aan te passen door gebruik te maken van tabindex, maar dat is vrijwel nooit een goed idee.

Juiste tabvolgorde in een formulier

12.5 Onderwerpen in de komende hoofdstukken

In de volgende hoofdstukken bespreken we de onderwerpen:

  1. Formuliervelden
  2. Formuliervalidatie
  3. Helpteksten
  4. Foutmeldingen
  5. Eenvoudig in gebruik
  6. Toetsenbordtoegankelijk
Naar boven