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>
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.