Ga naar hoofdinhoud

Descriptions in een formulier

Bij een formulierveld kun je extra informatie plaatsen, met bijvoorbeeld uitleg over hoe een veld in te vullen, de eisen voor een wachtwoord, foutmeldingen of waarschuwingen.

We geven deze extra informatie hier de verzamelnaam "descriptions", om aan te sluiten bij de term “accessible description”, die in toegankelijkheidsstandaarden wordt gebruikt.

Belangrijk voor een goede description:

Koppel een description aan het formulierveld

Voor screenreadergebruikers is het belangrijk dat de description samen wordt voorgelezen met het formulierveld.

Waarom? Screenreaders, zoals JAWS, schakelen over naar de “formulierenmodus” wanneer ze inhoud binnen een <form> element verwerken. In deze modus lezen screenreaders alleen de formuliervelden voor, inclusief de daaraan gekoppelde informatie (met bijvoorbeeld aria-describedby). De niet-gekoppelde informatie wordt dan niet voorgelezen, tenzij de gebruiker er zelf naar zoekt.

Meer informatie over de formulierenmodus:

Door de description aan het formulierveld te koppelen via 'aria'-describedby', wordt het label en de description samen voorgelezen wanneer een screenreadergebruiker het formulierveld focus geeft.

Let op: De gebruikte ID’s moeten uniek zijn voor de pagina, anders worden de verkeerde descriptions bij de velden voorgelezen.

Opzet in de HTML:

  • Geef description een ID: id="description-name".
  • Verwijs in het formulierveld naar dat ID: aria-describedby="description-name".
<label for="name">Naam</label>
<p id="description-name">Vul je voornaam en achternaam in.</p>
<input id="name" aria-describedby="description-name" autocomplete="name" />

Lees ook: MDN over aria-describedby.

Doen

Koppel een description aan het formulierveld, met aria-describedby.

Kies een wachtwoord van minimaal 8 karakters lang.

Niet doen

Koppeling weglaten.

Kies een wachtwoord van minimaal 8 karakters lang.

Plaats descriptions tussen label en formulierveld

Plaats alle descriptions op een consistente plek, liefst tussen het label en het formulierveld. Omdat de gebruiker van boven naar beneden leest, komt deze informatie na het label op een logisch moment in de leesvolgorde.

Ook is dan de kans dat de informatie overlapt met bijvoorbeeld browserpopups kleiner. Lees hiervoor het artikel Avoid Messages Under Fields van Adrian Roselli.

Doen

Plaats alle descriptions op een consistente plek, liefst tussen het label en het formulierveld.

Kies een wachtwoord van minimaal 8 karakters lang.

Doen

Plaats alle descriptions, ook de foutmeldingen, op een consistente plek, liefst tussen het label en het formulierveld.

Kies een wachtwoord van minimaal 8 karakters lang.

Je gekozen wachtwoord is te kort.

Niet doen

Description onder het formulierveld plaatsen.

Kies een wachtwoord van minimaal 8 karakters lang.

Niet doen

Description boven het formulierveld en foutmelding eronder plaatsen.

Kies een wachtwoord van minimaal 8 karakters lang.

Je gekozen wachtwoord is te kort.

Meerdere descriptions koppelen

Je kunt meerdere descriptions koppelen aan een formulierveld. Bijvoorbeeld als er een ook nog een foutmelding is.

Geef dan aria-describedby twee waardes (IDs) mee, gescheiden door een spatie. De volgorde van de ID's meegegeven in de aria-describedby is de volgorde waarin het voorgelezen wordt.

Doen

Koppel alle descriptions aan het formulierveld.

Kies een wachtwoord van minimaal 8 karakters lang.
Je gekozen wachtwoord is te kort.

Fieldset: Plaats descriptions tussen legend en eerste item

Radiobuttons en checkboxes worden gegroepeerd in een fieldset. De "vraag" staat in de legend. Plaats de description dan onder de legend vlak boven het eerste label/formulierveld. De description kan aan de fieldset worden gekoppeld.

Doen

Koppel een description aan de legend van de fieldset, met aria-describedby.

Wilt u inloggen?

Als u inlogt worden uw gegevens al ingevuld en kunnen we u makkelijker helpen.

Houd het aanklikbare gedeelte groot genoeg

Bij een goede koppeling tussen het label en het formulierveld, zijn beide elementen aanklikbaar. Dat maakt het aanklikbare gedeelte groot.

Een description ertussen verkleint de aanklikbare ruimte. Zorg er daarom voor dat het aanklikbare gedeelte van een formulierveld tenminste 24 bij 24 pixels is, liever nog groter waar mogelijk. Zodat gebruikers met dikke vingertoppen op een mobiel of met trillende handen met een muis toch een formulierveld kunnen selecteren.

Een minimale grootte van het aanklikbare gedeelte is nodig om te voldoen aan het WCAG-succescriterium 2.5.8: Minimale grootte van het aanwijsgebied (niveau A).

Formfield met textbox van 48 pixels hoog, en formfield met radiobuttons van 24 pixels hoog.

Voor het 'Voorbeeld thema' maken we gebruik van een grootte van 24x24 bij checkboxes en radio buttons. En houden we een grootte van 48x48px aan voor componenten zoals buttons en text inputs. Dit sluit mooi aan bij de spacing scale van het voorbeeld thema.

Houd de description kort en to-the-point

Heb je erg veel tekst nodig om het formulier goed in te vullen, vermeld deze tekst dan boven het formulier of op een introductiepagina voordat een gebruiker het formulier gaat invullen.

Soms is het niet te voorkomen dat een formulier jargon bevat, bijvoorbeeld omdat termen wettelijk zijn vastgelegd. Leg in zulke gevallen duidelijk uit wat zo'n term betekent.

Als informatie als losse tekstblokken tussen de vragen staat, bestaat de kans dat een screenreadergebruiker deze informatie mist.

Gebruik liever geen tooltips, dan maak je het voor de gebruiker moeilijker om belangrijke informatie te lezen. Het vergt een extra klik (of toetsenbordaanslagen) en wordt niet door alle gebruikers goed begrepen. Als het echt belangrijk is, laat de informatie dan meteen zien.

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.