Datum invoer
Het datuminvoerveld is een invoerveld met een standaard placeholder heeft met het datum-formaat. Wanneer het HTML component omgezet wordt in een werkend component, dan kan hier een datum-masker van gemaakt worden, zodat de gebruiker geholpen wordt met het invoeren van de datum in het juiste format.
Er worden geen datum-kiezers (kalenders) gebruikt omdat deze in veel gevallen onhandig zijn in het gebruikt wanneer de datum niet kort in het verleden of dichtbij in de toekomst liggen. Hiernaast zijn deze vaak lastig goed toegankelijk te maken.
Invoer datum
Toegankelijkheid
- Het placeholder die het datum-formaat toont verdwijnt wanneer de gebruiker in het veld focust of begint met typen (dit verschilt per browser). Hierom is het verplicht om een helptekst icoon toe te voegen waarin de uitleg van het datum-formaat staat.
- Ook wanneer er een inhoudelijke toelichting om het datum veld is, dan moet de toelichting van het datum-formaat hierin worden opgenomen.
Voorbeeld
Invoeren van een periode
Voor het invoeren van een periode wordt er meestal voor gekozen om de twee datumvelden onder elkaar te tonen, zodat de veldvalidaties en eventuele instructies beter leesbaar zijn. In backoffice applicaties is er echter vaak sprake van schermen met een groot aantal zoekfilters. In dat geval is het tonen van periode velden op één regel ook toegestaan.
Hieronder worden twee statische voorbeelden getoond van de periode invoer. Kijk bij het patroon Periode voor een interactief voorbeeld waarin ook de veldvalidaties uitgewerkt zijn.
Periode velden boven elkaar
Wanneer de velden boven elkaar getoond worden met per veld een eigen zichtbaar label, dan zijn er geen extra vereisten ten opzichte van een regulier datum veld.
Periode velden naast elkaar
Wanneer er horizontaal veel ruimte is in een sectie met zoekfilters, dan kunnen periodevelden naast elkaar getoond worden. Deze weergave is vooral geschikt voor meer complexe schermen. Er is door het ontbreken van visuele labels extra aandacht nodig voor toegankelijkheid.
Toegankelijkheid
Bij weergave van de velden op één regel moet er rekening gehouden worden met het volgende:
- De velden vormen visueel een groepering. Dit moet semantisch ook zo zijn. In het voorbeeld hieronder wordt een geneste fieldset gebruikt.
- De velden hebben een visueel verborgen label dat aangeeft dat het over een begindatum en een eindatum gaat.
- De velden zijn via een aria-describedby gekoppeld aan de helptekst met de invoerinstructie.