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. Deze zogenaamde focusstijlen moeten consistent en duidelijk genoeg zijn. Goed zichtbare focusstijlen zijn nodig om te voldoen het aan WCAG-succescriterium 2.4.7 Focus zichtbaar (niveau AA).
Zorg ervoor dat de focusstijl een kleurcontrast heeft van tenminste 3:1 ten opzichte van de achtergrond van het formulierveld en de omringende achtergrond. Dit is nodig om te voldoen aan het WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content (niveau AA).
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).
Aanvullingen of opmerkingen?
Deze richtlijnen worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.