Visueel ontwerp van een formulier
- Geef duidelijk aan waar het invoerveld is.
- Geef tekst voldoende kleurcontrast.
- Geef placeholders voldoende kleurcontrast.
- Maak de toetsenbordfocus goed zichtbaar.
- Maak aanklikbare formuliervelden groot genoeg.
- Geef fouten weer met meer dan alleen kleur.
- Gebruik geen afbeelding voor knoppen maar stijl tekst met CSS.
- Zorg voor een logische volgorde van de informatie.
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.<input type="text"/>
<fieldset><legend>Kies je kleur</legend><div><input type="radio" id="radio1" name="kleur"/> <label for="radio1">Blauw</label></div><div><input type="radio" id="radio2" name="kleur"/> <label for="radio2">Groen</label></div><div><input type="radio" id="radio3" name="kleur"/> <label for="radio3">Rood</label></div></fieldset>
Niet doen
Geef invoerveld een slecht zichtbare rand met onvoldoende contrast.
Dit voorbeeld heeft een contrast van 1.08:1.<input type="text"/>
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.<label for="naam1">Uw naam</label><input type="text" id="naam1" autoComplete="name"/>
Niet doen
Maak het label slecht leesbaar door onvoldoende contrast.
Dit voorbeeld heeft een contrast van 2.62:1.<label for="naam2">Uw naam</label><input type="text" id="naam2" autoComplete="name"/>
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.<input placeholder="Zoeken"/>
Niet doen
Maak de placeholder slecht zichtbaar door te laag contrast.
Dit voorbeeld heeft een contrast van 3.54:1.<input placeholder="Zoeken"/>
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:
- 1.4.11 Contrast van niet-tekstuele content (niveau AA).
- 2.4.7 Focus zichtbaar (niveau AA).
- 2.4.13 Focusweergave (niveau AAA)
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.<input type="text"/>
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.<p><a href="https://www.linkedin.com/company/nl-design-system/" class="utrecht-link utrecht-link--html-a" aria-label="LinkedIn"><svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="50x50" fill="currentColor" width="50" height="50" focusable="false"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path></svg></a></p>
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.<p><a href="https://www.linkedin.com/company/nl-design-system/" class="utrecht-link utrecht-link--html-a"> <div>LinkedIn</div><svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="50x50" fill="currentColor" width="24" height="24" focusable="false"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path></svg></a></p>
Niet doen
Maak het aanklikbare te klein.
Dit voorbeeld is het icoontje 24 bij 24 pixels.<p><a href="https://www.linkedin.com/company/nl-design-system/" class="utrecht-link utrecht-link--html-a" aria-label="LinkedIn"><svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" fill="currentColor" width="24" height="24" focusable="false"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path></svg></a></p>
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.