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)

<style>label.verplicht { background-color: yellow }</style>
<label for="email" class="verplicht">E-mailadres</label>

<style>label.verplicht:after { content: " (*)"; }</style>
<label for="email" class="verplicht">E-mailadres</label>

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>