Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief
Sommige formulierelementen werken (nog) niet goed of zijn complex om te bedienen met toetsenbord, screenreader of stembesturing.
Op HTML5 Accessibility houdt Steve Faulkner de ondersteuning bij van HTML-elementen, in de verschillende browsers en voor de diverse hulpmiddelen.
De ontwikkeling van browsers gaat snel en het gebruik van HTML geeft niet altijd garantie voor toegankelijkheid. Test daarom altijd een formulier met toetsenbord, screenreader of stembesturing.
Ervoor zorgen dat iedereen een formulierelement kan bedienen en begrijpen is nodig om te voldoen aan de volgende WCAG-succescriteria:
- 1.3.2 Betekenisvolle volgorde (niveau A).
- 2.1.1 Toetsenbord (niveau A).
- 2.4.6 Koppen en labels (niveau AA).
- 3.3.2 Labels of Instructies (niveau A).
- 4.1.2 Naam, rol, waarde (niveau A).
Multiselect
Het multiselect formulierelement <select multiple> is ingewikkeld te bedienen met toetsenbord. In Safari werkt multiselect (nog) niet met een toetsenbord en daarom ook niet met de screenreader VoiceOver.
Gebruik in plaats van multiselect bijvoorbeeld checkboxes om gebruikers meerdere keuzes te laten maken.
Datum- en tijdkiezers
Datum- en tijdkiezers zijn lastig goed toegankelijk te maken, zodat ze voor iedereen makkelijk te begrijpen en te bedienen zijn. Maar ze kunnen wel handig zijn voor ziende muisgebruikers.
De beste optie is om naast de kiezer ook een alternatief toe te voegen, een formulierveld waar gebruikers de datum of tijd kunnen invullen.
Veel browsers voegen zelf al een kiezer toe voor de <input type="date"> en <input type="time">-elementen, de gebruiker kan dan beide opties gebruiken. Het is alleen jammer dat deze kiezers (nog) niet te stijlen zijn met CSS. Daarnaast zien de kiezers er per browser verschillend uit en werken ze anders.
Input type="number" versus inputmode="numeric"
Een andere optie is het laten invoeren van alleen nummers met <input type="number"> Bijvoorbeeld:
<label for="dag1">Geboortedag</label> <input id="dag1" type="number" autocomplete="bday-day" min="1" max="31" />
GOV.UK heeft hier onderzoek naar gedaan en vindt type=number qua gebruikersvriendelijkheid te foutgevoelig.
Met
<input type="number">bestaat het risico dat gebruikers per ongeluk een getal verhogen wanneer ze iets anders proberen te doen, bijvoorbeeld omhoog of omlaag scrollen op de pagina. En als de gebruiker iets probeert in te voeren dat geen getal is, is er geen expliciete feedback over wat verkeerd gaat.
Zij beveelt het gebruik van inputmode="numeric" aan, omdat dit het numerieke toetsenbord op mobile apparaten activeert.
Bijvoorbeeld:
<label for="dag2">Geboortedag</label> <input id="dag2" type="text" inputmode="numeric" autocomplete="bday-day" />
Selects voor dag, maand en jaar
Een optie is het gebruik van 3 select-opties met de waardes van bijvoorbeeld dag, maand en jaar. Het nadeel hiervan is dat de select voor een geboortejaar een hele lange lijst kan worden. Het kan confronterend zijn als, scrollend door een lange lijst aan jaartallen, beseft dat je wel erg oud aan het worden bent...
Tekstveld
Als de data niet verder automatisch verwerkt gaat worden is een tekstveld een makkelijke optie. Dan is de gebruiker vrij een eigen format te kiezen. Geef dan wel een hint in de description hoe dit het beste te doen.
De keuze hangt af van de context
Welke optie je kiest, is afhankelijk van de context. Wat vraag je uit? En wat gaat er met de data gebeuren? Bijvoorbeeld:
- Kent men de datum uit het hoofd (bijvoorbeeld geboortedatum)? Gebruik dan drie losse invulvelden.
- Kan men een datum prikken (bijvoorbeeld een afspraak)? Dan is een datumkiezer in combinatie met zelf invullen een goed plan. "Ik weet de datum niet maar woensdagen komen mij het best uit". Hou wel rekening met 'niet beschikbare' dagen, gebruik in dat geval als alternatief bijvoorbeeld een select-optie met beperkte keuzes.
- Kan de gebruiker alleen kiezen uit een paar data (bijvoorbeeld vanaf vandaag tot een week vooruit), dan zijn radio buttons geschikt.
Lees hierover meer op Ask users for Dates van GOV.UK.
De regel is altijd: Je kunt een ontoegankelijke component aanbieden, mits je ook een goed toegankelijk alternatief aanbiedt.
Doen
Uitvragen geboortedatum met een tekstveld.
Bijvoorbeeld 31 december 1970.
<label for="date0">Geboortedatum</label><p id="description-date0">Bijvoorbeeld 31 december 1970.</p><input id="date0" type="text" autocomplete="bday" aria-describedby="description-date0"/>
Doen
Uitvragen geboortedatum met een datumveld.
De meeste browsers voegen zelf een datumkiezer toe.Bijvoorbeeld 31/12/1970.
<label for="date1">Geboortedatum</label><p id="description-date1">Bijvoorbeeld 31/12/1970.</p><input id="date1" type="date" aria-describedby="description-date1" autocomplete="bday"/>
Doen
Uitvragen geboortedatum met een inputmode=numeric.
<fieldset><legend>Geboortedatum</legend><div><label for="day2">Dag</label><div id="description-day2">Bijvoorbeeld 31.</div><input id="day2" type="text" inputmode="numeric" aria-describedby="description-day2" autocomplete="bday-day" maxlength="2"/></div><div><label for="month2">Maand</label><div id="description-month2">Bijvoorbeeld 12 voor december.</div><input id="month2" type="text" inputmode="numeric" aria-describedby="description-month2" autocomplete="bday-month" maxlength="2"/></div><div><label for="year2">Jaar</label><div id="description-year2">Bijvoorbeeld 1970.</div><input id="c2" type="text" inputmode="numeric" aria-describedby="description-year2" autocomplete="bday-year" maxlength="4"/></div></fieldset>
Niet doen
Uitvragen geboortedatum met een nummerveld (type=number).
<fieldset><legend>Geboortedatum</legend><div><label for="day3">Dag</label><div id="description-day3">Bijvoorbeeld 31.</div><input id="day3" type="number" aria-describedby="description-day3" autocomplete="bday-day" min="1" max="31"/></div><div><label for="month3">Maand</label><div id="description-month3">Bijvoorbeeld 12 voor december.</div><input id="month3" type="number" aria-describedby="description-month3" autocomplete="bday-month" min="1" max="12"/></div><div><label for="year3">Jaar</label><div id="description-year3">Bijvoorbeeld 1970.</div><input id="year3" type="number" aria-describedby="description-year3" autocomplete="bday-year"/></div></fieldset>
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.