Een datumkiezer die iedereen kan bedienen

Probeer het eens bij uw eigen afsprakenformulier: klik in het datumveld, leg de muis weg en kies met alleen het toetsenbord een datum over drie weken. Bij een goede datumkiezer lukt dat in een paar toetsaanslagen. Bij veel kalenderplugins blijft u steken. De pijltjes reageren niet, de focus verdwijnt ergens achter de kalender, of u kunt de datum niet gewoon intypen. Een toegankelijke datepicker is geen luxe voor een paar mensen: bij een boekingsformulier is het de plek waar een klant beslist of hij de afspraak maakt.

Waar datumkiezers vastlopen

De typische kalender in een formulier is een pop-up met een raster van dagen, pijltjes voor de vorige en volgende maand, en soms keuzelijsten voor maand en jaar. Daar kan veel misgaan:

• Typen is geblokkeerd. Het veld is alleen-lezen, zodat u verplicht in de kalender moet klikken.
• Geen toetsenbordbediening. De dagen zijn gewone tekst in een tabel en niet met Tab of pijltjes te bereiken.
• De focus zit vast of raakt zoek. Na het openen blijft de focus in het veld, of springt hij naar het einde van de pagina.
• Geen namen. Een screenreader leest “15” voor, zonder maand, of “knop” voor het pijltje naar de volgende maand.
• Onduidelijke status. Welke dagen zijn vol? Dat is alleen te zien aan een grijze kleur.
• Te kleine vakjes. Op een telefoon zijn de dagen zo klein dat u steeds de verkeerde raakt.

Elk van die punten raakt aan een WCAG-eis: bediening met het toetsenbord (2.1.1), naam en rol (4.1.2), zichtbare focus (2.4.7), kleur als enig signaal (1.4.1) en in WCAG 2.2 een minimale doelgrootte van 24 bij 24 css-pixels (2.5.8).

Regel één: laat de bezoeker de datum typen

De eenvoudigste en belangrijkste verbetering: laat een datum ook getypt worden. Veel mensen weten precies welke datum ze willen, en typen is dan sneller dan bladeren. Voor iemand met een screenreader of spraakbediening is het vaak de enige manier die betrouwbaar werkt. De kalender wordt zo een hulpmiddel, geen verplichting.

Zeg er wel bij welk formaat u verwacht, in het label of een hint die altijd zichtbaar is:

<label for="datum">Gewenste datum</label>
<p id="datum-hint">Bijvoorbeeld 14-05-2026 (dag-maand-jaar)</p>
<input id="datum" name="datum" type="text"
       inputmode="numeric" aria-describedby="datum-hint">

Wees ruim in wat u accepteert: 14-5-2026, 14/05/2026 en 14 05 2026 kunt u allemaal zelf omzetten. Komt er toch iets onbruikbaars binnen, geef dan een melding die precies zegt wat er mis is en hoe het goed moet. Hoe u zulke meldingen opbouwt, staat in foutmeldingen die mensen echt helpen.

Het native datumveld: een goed vertrekpunt

Html heeft een eigen datumveld: <input type="date">. De browser zorgt dan voor de kalender, de toetsenbordbediening en op telefoons voor de vertrouwde datumkeuze van het besturingssysteem. Dat is vaak toegankelijker dan een zelfgebouwde kalender, omdat browsermakers er veel werk in hebben gestoken.

Er zijn kanttekeningen. Het formaat dat de bezoeker ziet, hangt af van de taalinstelling van zijn browser, niet van uw site. De manier waarop screenreaders het veld voorlezen, verschilt per combinatie van browser en screenreader. En het uiterlijk is maar beperkt aan te passen aan uw huisstijl. Voor een gewoon formulier weegt dat meestal niet op tegen de voordelen. Test het wel in de browsers die uw bezoekers gebruiken.

Een eigen kalender: zo moet hij werken

Heeft u een eigen kalender nodig, bijvoorbeeld omdat beschikbaarheid per dag moet worden getoond, dan zijn dit de afspraken. Ze volgen het datumkiezerpatroon uit de ARIA Authoring Practices Guide van het W3C.

Openen en sluiten

• Een knop naast het tekstveld opent de kalender, met een duidelijke naam zoals “Kies een datum uit de kalender”.
• Bij openen gaat de focus naar de gekozen datum, of naar vandaag.
• Escape sluit de kalender en zet de focus terug op de knop.

Navigeren met het toetsenbord

Wat de screenreader moet horen

• Elke dag heeft een volledige naam: “dinsdag 14 mei 2026”, niet alleen “14”.
• De maand en het jaar boven het raster worden gemeld bij het wisselen van maand.
• Niet beschikbare dagen worden ook zo gemeld, bijvoorbeeld “vol” of “niet beschikbaar”, en zijn niet alleen grijs.
• De gekozen datum wordt aangeduid met aria-selected of aria-current.

Geboortedata: geen kalender

Voor een geboortedatum is een kalender bijna altijd de verkeerde keuze. Wie in 1958 is geboren, moet dan tientallen jaren terugbladeren. Gebruik een tekstveld met het juiste formaat, of drie losse velden voor dag, maand en jaar, elk met een eigen label. Met autocomplete="bday" kan de browser de datum zelfs voor de bezoeker invullen. Meer daarover in autocomplete in formulieren.

Boekingssystemen en reserveringsplugins

Bij praktijken, salons, restaurants en verhuurbedrijven is de datumkiezer vaak onderdeel van een boekingsplugin. U heeft dan minder invloed op de code. Wat u wel kunt doen:

1. Test de plugin zonder muis, van datum kiezen tot bevestigen.
2. Kijk in de instellingen of er een optie is om de datum te laten typen, of om een lijstweergave te tonen in plaats van een kalenderraster.
3. Vraag de maker van de plugin naar toegankelijkheid. Serieuze makers hebben daar een antwoord op.
4. Bied een alternatief, zoals een telefoonnummer of e-mailadres bij het formulier, zolang de plugin niet goed werkt.

Een boekingsplugin is ook een onderdeel dat met elke update kan veranderen. Over het beheer daarvan leest u meer in onderhoud van een boekingssysteem op uw website.

Werkt de datumkiezer niet met het toetsenbord, dan is dat meestal geen los probleem. Het zegt vaak iets over de rest van de site. Hoe u dat in de hele site test en verbetert, leest u op uw website bruikbaar maken met alleen een toetsenbord. Het complete overzicht staat op toegankelijk maken volgens WCAG 2.2.