4.1.6 Verplichte velden zijn binnen het label aangekondigd
Maak bezoekers duidelijk welke formuliervelden ze verplicht moeten invullen. Gebruik hiervoor bij voorkeur het woord 'verplicht' of een asterisk (*). Zorg ervoor dat deze aanduiding binnen het label
geplaatst is. Dat maakt het ondermeer voor blinden eenvoudiger om, met behulp van een screenreader, het formulier vlot in te vullen.
Alternatieve mogelijkheden
- Als alle velden verplicht zijn, kunt u dat ook bovenaan het formulier vermelden.
- U kunt de verplichte velden ook groeperen in een
fieldset
en in delegend
vermelden dat het om verplichte velden gaat. - Als u een andere manier gebruikt om aan te geven of een veld verplicht is, vragen we om hier boven het formulier een regel uitleg aan te wijden.
- Kleuren en iconen zijn vanzelfsprekend toegestaan, maar zorg er steeds voor dat u ze gebruikt in overeenstemming met de andere ijkpunten.
Voorbeelden
Markering uitsluitend met CSS (niet goed)
<label for="email" class="verplicht">E-mailadres</label>
label.verplicht {
background-color: yellow;
}
<label for="email" class="verplicht">E-mailadres</label>
label.verplicht:after {
content: " (*)";
}
Markering buiten het label (niet goed)
<label for="email">E-mailadres</label> (*)
<input type="text" id="email" />
Markering binnen het label (goed)
<label for="email1">E-mailadres (verplicht)</label>
<label for="email2">E-mailadres (*)</label>
Het is ook toegestaan om formuliervelden te groeperen in een <fieldset>
en in de bijbehorende <legend>
aan te kondigen of de velden verplicht zijn.
<fieldset>
<h2>Persoonlijke gegevens</h2>
<legend>(verplicht)</legend>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" />
<label for="email">E-mailadres</label>
<input type="text" id="email" name="email" />
</fieldset>
Zelf testen
Ga na of er formuliervelden als verplicht aangekondigd zijn. Controleer of deze aankondiging (bijvoorbeeld een asterisk *) onderdeel is van het label
-element. Dat doet u bijvoorbeeld door er op te klikken en te zien of de cursor in het formulierveld springt, of in de html-code te kijken (zie ook 4.1.1).
- Ja; dan is aan dit ijkpunt voldaan
- Nee; plaats de aankondiging binnen het
label
-element.