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 de legend 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.