4.1.3 Het label bij datumvelden vermeldt de vereiste notatie

Als bezoekers een datum moeten intypen in een formulier, dan is het verplicht om de vereiste datumnotatie (veelal dd/mm/jjjj) of een voorbeelddatum (zoals 21/05/1979) te vermelden. De datumnotatie moet bovendien deel uitmaken van het <label>.

Voorbeeld (goed)

<label for="startdatum">Startdatum (dd/mm/jjjj)</label>
<input type="text" maxlength="10" id="startdatum" name="startdatum" />

<label for="einddatum">Einddatum (dd/mm/jjjj)</label>
<input type="text" maxlength="10" id="einddatum" name="einddatum" />

Voorbeeld (goed)

<label for="startdatum2">Startdatum (Voorbeeld: 01/02/2010)</label>
<input type="text" maxlength="10" id="startdatum2" name="startdatum" />

<label for="einddatum2">Einddatum (Voorbeeld: 31/10/2010)</label>
<input type="text" maxlength="10" id="einddatum2" name="einddatum" />

Andere mogelijkheden

U kunt er ook voor kiezen om drie keuzelijsten te gebruiken voor dag, maand en jaar. Dit ijkpunt is dan niet van toepassing.

U kunt bezoekers ook een datum laten selecteren via een kalender. Zulke date pickers zijn meestal niet met het toetsenbord te bedienen. Een date picker mag daarom nooit de enige manier zijn om een datum te kiezen. Zorg in deze gevallen altijd voor een invoerveld. Het is uiteraard perfect mogelijk (en zelfs aangeraden) om beide invoermechanismen te voorzien.

Screenshot

Voorbeeld van een 'date picker'

Voorbeeld (goed)

<label for="startdatum3">Startdatum (dd/mm/jjjj)</label>
<input type="text" maxlength="10" id="startdatum3" name="startdatum" />
<a href="#startdatum" onclick="pickDate()">
<img src="kalender.png" alt="Kies een startdatum uit de kalender" />
</a>
<p class="help">Voorbeeld: 01/02/2010</p>

<label for="einddatum3">Einddatum (dd/mm/jjjj)</label>
<input type="text" maxlength="10" id="einddatum3" name="einddatum" />
<a href="#einddatum" onclick="pickDate()">
<img src="kalender.png" alt="Kies een einddatum uit de kalender" />
</a>
<p class="help">Voorbeeld: 31/10/2010</p>

Aanbevelingen

  • Wees bij het verwerken van de datum niet te strikt: zolang een datum betrouwbaar ge├»nterpreteerd kan worden door de server, is het perfect doenbaar om een ingevoerde datum ook te verwerken als liggende streepjs in plaats van slashes gebruikt worden (21-05-1979) of wanneer een gebruiker vergat om een 0 toe te voegen aan de maand (21/5/1979).
  • Zorg ervoor dat de date picker ook bruikbaar is met het toetsenbord: niet alleen het selecteren van een datum, maar ook het kunnen sluiten van de date picker met het toetsenbord is belangrijk. Zorg er ook voor dat het klikgebied van de hyperlinks (1, 2, 3 etc.) voldoende groot is.
  • Zorg ervoor dat mensen met een motorische handicap zo weinig mogelijk moeten wisselen tussen het gebruik van het toetsenbord en de muis bij het invullen van een formulier. Als je ervoor kan zorgen dat alles met de muis in te vullen is, dan zorgt dat voor een interessante meerwaarde (bijvoorbeeld wanneer er enkel keuzerondjes, aankruisvakjes en datumvelden zijn gebruikt).

Zelf testen

Ga na of er op de website formulieren zijn met een of meerdere datum velden.

Worden dag, maand en jaar in drie verschillende keuze lijsten in gegeven dan is aan dit ijkpunt niet van toepassing.

Moet dag, maand en/of jaar in een tekst veld in gegeven worden ga dan na of er een voorbeeld van datum notatie of datum is vermeld bij deze velden.
Staat het voorbeeld in de label tag?

  • ja; dan is aan dit ijkpunt voldaan.
  • Nee; pas uw website aan.
    • Er is geen voorbeeld
    • Er staat enkel een voorbeeld in de value; al in gevuld in het datum veld (en verdwijnt het zodra u er met de muis in klikt of met het toetsenbord in tabt)
    • Er is een voorbeeld maar het staat niet binnen de label tag (als u er op klikt springt de cursor niet naar het datum veld)

Moet de datum in een kalender gekozen worden (date picker)? Ga na of er een alternatieve invoer methode is voorzien; kan de gebruiker ook met het toetsenbord een datum ingeven?

  • Nee; pas uw website aan
  • Ja ; test met voorbeeld datum (notatie). Is de datum succesvol met enkel toetsenbod in te geven?
    • Nee; pas uw website aan
    • ja; dan is aan dit ijkpunt voldaan.