Ga naar hoofdinhoud

Visueel ontwerp van een formulier

Geef duidelijk aan waar een invoerveld is

Gebruikers moeten herkennen waar en hoe groot het invoerveld, radiobutton of checkbox is.

Het kleurcontrast van de randen (borders) ten opzichte van de achtergrondkleur moet daarom 3:1 of hoger zijn.

Het duidelijk aangeven van een invoerveld is nodig om te voldoen aan het WCAG-succescriterium 1.1.1 Niet-tekstuele content (niveau AA).

Doen

Geef invoerveld een duidelijke rand met voldoende contrast.

Dit voorbeeld heeft een contrast van 5.54:1.

Doen

Geef een radiobutton voldoende kleurcontrast.

Dit voorbeeld heeft een contrast van 5.54:1.
Kies je kleur

Niet doen

Geef invoerveld een slecht zichtbare rand met onvoldoende contrast.

Dit voorbeeld heeft een contrast van 1.08:1.

Geef tekst voldoende kleurcontrast

Gebruikers moeten goed kunnen lezer wat ze moeten invullen of waaruit ze kunnen kiezen.

Het kleurcontrast van de tekst van labels en descriptions ten opzichte van de achtergrondkleur moet daarom 4.5:1 of hoger zijn.

Voldoende kleurcontrast van tekst is nodig om te voldoen aan het WCAG-succescriterium 1.4.3 Contrast (minimum) (niveau AA).

Doen

Maak het label goed leesbaar door voldoende contrast.

Dit voorbeeld heeft een contrast van 5.54:1.

Niet doen

Maak het label slecht leesbaar door onvoldoende contrast.

Dit voorbeeld heeft een contrast van 2.62:1.

Geef placeholders voldoende kleurcontrast

Ook het kleurcontrast van de tekst van placeholders ten opzichte van de achtergrondkleur moet 4.5:1 of hoger zijn.

Let op: sommige browsers geven een placeholder lichter weer dan in de CSS is bepaald. Dit wordt verder uitgelegd bij de richtlijnen over placeholders.

Doen

Maak de placeholder goed leesbaar door voldoende contrast.

Dit voorbeeld heeft een contrast van 6.28:1.

Niet doen

Maak de placeholder slecht zichtbaar door te laag contrast.

Dit voorbeeld heeft een contrast van 3.54:1.

Maak toetsenbord focus goed zichtbaar

Voor gebruikers van een toetsenbord of van spraakherkenning moet duidelijk zijn welk formulierveld de focus heeft. Maak de focusstijl makkelijk te herkennen en geef het voldoende kleurcontrast. Dan kunnen ook slechtziende of kleurenblinde bezoekers het element met focus goed herkennen.

Dit doe je door een minimale dikte van 2 CSS-pixels en een minimaal contrast van 3:1 ten opzichten van aangrenzende kleuren. En daarmee bedoelen we de kleur van de component dat focus heeft, maar ook de achtergrond waar de component ‘bovenop’ ligt.

Een button of link komt namelijk misschien het meest voor op een witte achtergrond, maar houdt ook het scenario’s in gedachten waarbij de link of button op een getinte achtergrond staat zoals bijvoorbeeld een footer.

Zorg er ook voor dat de focusring heeft een kleurcontrast van ten minste 3:1 tussen dezelfde pixels in de gefocuste en niet-gefocuste staat.

Goed zichtbare focusstijlen zijn nodig om te voldoen het aan de WCAG-succescriteria:

Doen

Geef invoerveld een duidelijke visuele focusstijl.

In dit voorbeeld is de focus herkenbaar aan een stippellijn rond het invoerveld. Klik in het veld of tab ernaar met het toetsenbord om het effect te zien.

Maak aanklikbare formuliervelden groot genoeg

Zorg dat het aanwijsgebied (aanklikbare deel) van radio buttons, checkboxes en icons tenminste 24 bij 24 pixels groot is. Dit is nodig om te voldoen aan het WCAG-succescriterium 2.5.8 Grootte aanwijsgebied (minimum) (niveau AA).

Maar een aanklikbaar gebied van 44 bij 44 pixels, voor het aanklikbare deel, is veel gebruiksvriendelijker voor mensen met dikke vingers of een trillende hand. Houdt daarom een aanklikbaar gedeelte aan van tenminste 44 bij 44 pixels.

Adrian Roselli over doelgrootte in Target Size and 2.5.5: "Ongeacht het toegankelijkheidsniveau dat je wilt aanhouden, probeer ervoor te zorgen dat interactieve besturingselementen minimaal 44 bij 44 pixels groot zijn. Links in tekstblokken zijn uitgezonderd.".

In Designing better target sizes legt Ahmad Shadeed duidelijk uit wat doelgrootte precies is en wat de impact is voor een gebruiker. Hij pleit ook voor een minimale doelgrootte van 44 bij 44 pixels.

Google's Material Design kiest ook voor een groter aanklikgebied, ondersteund met gebruikersonderzoek. Dit wordt uitgelegd in de YouTube video Designing A11y with Material Design.

Zie ook het WCAG-succescriterium: Grootte aanwijsgebied (verbeterd) (niveau AAA).

Doen

Maak het aanklikbare deel groot genoeg.

Dit voorbeeld is het icoontje 50 bij 50 pixels.

Doen

Maak het aanklikbare deel groot genoeg voor er ook tekst toe te voegen.

Toevoegen van tekst aan een icoontje maakt het voor iedereen duidelijker waar de link naartoe gaat.

Niet doen

Maak het aanklikbare te klein.

Dit voorbeeld is het icoontje 24 bij 24 pixels.

Geef fouten weer met meer dan alleen kleur

Gebruik van iconen en kleur bij foutmeldingen is goed voor de duidelijkheid, maar zorg ook altijd voor tekstuele foutmeldingen. Niet iedereen kan alle kleuren zien of begrijpt de icoontjes goed.

Vermeld de foutmeldingen in beschrijvende tekst. Hoe dit te doen is uitgebreid beschreven bij de richtlijnen over Voorkom fouten en Foutmeldingen.

Gebruik van tekst naast kleur en icoontjes is nodig om te voldoen aan het WCAG-succescriterium 1.4.1 Gebruik van kleur (niveau A).

Gebruik geen afbeelding voor knoppen maar stijl tekst met CSS

Zorg ervoor dat tekst in buttons goed meeschaalt als de gebruiker inzoomt. Een gebruiker die inzoomt moet de tekst kunnen blijven lezen.

Gebruik daarom liever geen jpg-, gif- of png-bestanden voor buttontekst maar stijl tekst met CSS.

Deze richtlijn is verder beschreven bij de richtlijnen over Buttons.

Zorg voor een logische volgorde van de informatie

De informatie in een formulier moet logisch zijn als de gebruiker van boven naar beneden leest.

Zet dus geen belangrijke informatie onder de submitbutton. Bezoekers verwachten dit niet en kunnen die informatie missen, zeker als deze slechtziend of blind zijn.

Is deze constructie toch dringend gewenst: Geef aan als er meer formuliervelden of links of knoppen volgen onder de submitbutton. Hoe dit het beste kan is op dit moment een punt van discussie. Deel je mening op GitHub.

Een logische volgorde van informatie is nodig om te voldoen aan het WCAG-succescriterium 1.3.2 Betekenisvolle volgorde (niveau A).

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? Deel je mening op GitHub met je suggesties.