Formulieren

Een toegankelijk formulier is essentieel voor mensen die gebruik maken van voorleessoftware of enkel het toetsenbord gebruiken. Er moet rekening worden gehouden met:

  • toetsenbordtoegankelijkheid
  • instructies
  • koppelen van label en invoerveld
  • groeperen van velden
  • foutmeldingen

Het toegankelijk maken van formulieren is niet ingewikkeld.

Toetsenbordtoegankelijk

Als een formulier niet toetsenbordtoegankelijk is, dan is deze doorgaans volledig ontoegankelijk voor gebruikers van screenreaders.

Zorg ervoor dat alle functionaliteit te bedienen is met het toetsenbord. Zorg daarnaast voor een logische tabvolgorde en zichtbare focus.

Instructies

Voor het gebruiken van een formulier zijn duidelijke instructies nodig. Bijvoorbeeld het aangeven van verplichte velden of een verplicht invoerformaat.

Het aangeven van een verplichte veld kan bijvoorbeeld met een asteriks (*) of in tekst. Er moet voorafgaand aan het eerste invoerveld worden gecommuniceerd op welke manier de verplichte velden zijn aangegeven.

Net als de verplichte velden, kunnen er ook verplichte invoerformaten zijn. Denk hierbij aan een postcode of een e-mailadres dat moet worden ingevuld. Ook hierbij is het belangrijk om voor het invoerveld duidelijk te maken wat de eisen zijn aan de invoer.

Invoervelden en labels

Invoervelden omvatten tekstvelden, checkboxen, radiobuttons, en alle andere velden die zijn ontworpen voor gebruikersinvoer. Enkele voorbeelden hiervan zijn:

<input type="text">
<input type="checkbox">
<input type="radiobutton">
<input type="password">
<input type="url">
<input type="color">
<input type="date">
<input type="image">

Bij een invoerveld hoort een label. Een label geeft aan welke gegevens er worden verwacht in een invoerveld. Hiervoor wordt het HTML-attribuut <label> gebruikt. Het label en invoerveld worden gekoppeld met een for/id-koppeling:

<label for="veld1">Naam:</label>
<input type="text" id="veld1">
<label for="veld2">Woonplaats:</label>
<input type="text" id="veld2">

Een label wordt naast of boven het betreffende invoerveld geplaatst.

Een placeholder mag niet worden gebruikt ter vervanging van een label. Een placeholder kan wel zeer waardevol zijn voor velden waarvoor gegevens in een specifiek formaat nodig zijn. De placeholder kan dan worden gebruikt om te communiceren welke formaat verwacht wordt.

Groeperen van velden

Heeft het formulier meerdere secties van gerelateerde invoervelden? Gebruik dan fieldset om ze te groeperen, en legend om een label te geven voor wat dit deel van het formulier.

Foutmeldingen

Het belangrijk om een duidelijke foutmelding te geven bij een foutieve invoer.

Testen

  • Controleer of alle invoervelden een bijbehorend label hebben

In ontwikkeling.

Gerelateerde succescriteria

  • 1.3.1 Info en relaties (A)
  • 2.4.6 Koppen en labels (AA)
  • 3.2.1 Wijziging bij focus (A)
  • 3.2.2 Wijziging bij input (A)
  • 3.3.1 Fout identificatie (A)
  • 3.3.2 Labels of instructies (A)
  • 3.3.3 Foutsuggesties (AA)
  • 3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (AA)
  • 3.3.5 Hulp (AAA)
  • 3.3.6 Foutpreventie (AAA)
  • 4.1.2 Naam, rol, waarde (A)