Waarom alleen een sterretje niet genoeg is
Veel formulieren gebruiken een sterretje om aan te geven dat een veld verplicht is:
<label for="email" >E-mailadres * </label>
<input type="email" id="email" name="email">
Visueel is dit vaak duidelijk. Maar het sterretje alleen maakt het veld nog niet programmatisch verplicht. Een schermlezer kan de tekst wel voorlezen, maar de browser herkent het veld niet als verplicht veld. Daardoor ontbreekt belangrijke informatie in de code.
Gebruik het standaard required-attribuut
De beste oplossing is het standaard HTML-attribuut required gebruiken:
<label for="email">E-mailadres *</label>
<input type="email" id="email" name="email" required>
Visueel ziet dit invoerveld er hetzelfde uit, maar voor assisterende software is het duidelijker. Met dit attribuut wordt het veld programmatisch als verplicht gemarkeerd. Browsers herkennen dit attribuut en kunnen gebruikers helpen wanneer het veld leeg wordt verzonden.
Maak duidelijk wat het sterretje betekent
Een sterretje is niet voor iedereen vanzelfsprekend. Zet daarom bij voorkeur boven het formulier wat het sterretje betekent:
<p>Velden met een * zijn verplicht.</p>
<label for="email">E-mailadres *</label>
<input type="email" id="email" name="email" required>
Velden met een * zijn verplicht.
Je kunt het woord “verplicht” ook direct in het label opnemen. Dat is vaak nog duidelijker:
<label for="email">E-mailadres verplicht</label>
<input type="email" id="email" name="email" required>
Gebruik geen niet-standaard attributen als enige oplossing
Sommige formulieren gebruiken attributen zoals:
<input type="email" validation="required|valid_email">Dit kan door een formulierplugin of script worden gebruikt voor validatie, maar het is geen standaard HTML. Browsers en assisterende technologie herkennen dit niet automatisch als verplicht veld.
Gebruik zulke attributen daarom nooit als enige manier om een verplicht veld aan te geven. Voeg altijd het standaard required-attribuut toe.
Is aria-required nodig?
Vergeet nooit de eerste regel van ARIA: gebruik geen ARIA. Bij standaard HTML-formuliervelden is required meestal voldoende. In sommige complexe maatwerkcomponenten kan aria-required="true" aanvullend nodig zijn, bijvoorbeeld bij aangepaste invoervelden die niet als standaard HTML-input zijn opgebouwd.
Voor normale invoervelden is dit meestal genoeg:
<input type="email" id="email" name="email" required>Gebruik aria-required="true" niet als vervanging voor required wanneer required gewoon gebruikt kan worden.
Invoervelden en persoonsgegevens
Wanneer browsers het doel van de invoer van een formulier kunnen herkennen, kunnen ze invoervelden automatisch invullen. Dit is gebaseerd op eerder ingevulde formulieren. Zo wordt je naam, adresgegevens en bijvoorbeeld e-mailadres automatisch ingevuld. Super handig!
Maar, de browser moet wel weten om welke informatie gevraagd wordt. Hiervoor bestaan autocomplete attributen. In het volgende voorbeeld is dit attribuut toegevoegd, om het formulier completer te maken.
<label for="email">E-mailadres verplicht</label>
<input type="email" id="email" name="email" autocomplete="email" required>Welke WCAG-criteria spelen mee?
Een verplicht veld dat alleen visueel herkenbaar is, kan problemen opleveren onder meerdere WCAG-criteria.
- Bij WCAG 1.3.1 Info en relaties gaat het om informatie die visueel zichtbaar is, maar niet goed programmatisch beschikbaar is.
- Bij WCAG 3.3.2 Labels of instructies gaat het om duidelijke instructies bij invoervelden. Gebruikers moeten kunnen begrijpen welke informatie nodig is en welke velden verplicht zijn.
- Bij WCAG 4.1.2 Naam, rol, waarde kan het misgaan wanneer de eigenschappen van een formulieronderdeel, zoals de verplichte status, niet goed beschikbaar zijn voor assisterende technologie.
Praktische checklist
- Is visueel duidelijk dat het veld verplicht is?
- Is het veld programmatisch verplicht met
required? - Is duidelijk wat een sterretje betekent?
- Heeft het veld een goed gekoppeld label?
- Wordt er niet alleen vertrouwd op placeholdertekst of niet-standaard attributen?