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:

• Form Instructions, Web Accessibility Initiative.
• Browse and focus modes, Accessibility Developer Guide.

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.

Nieuw wachtwoord

Kies een wachtwoord van minimaal 8 karakters lang.

Niet doen

Koppeling weglaten.

Nieuw wachtwoord

Kies een wachtwoord van minimaal 8 karakters lang.

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.