Grootte van het aanwijsgebied

“Waarom moeten die knoppen nou zo klein zijn?”

Ik hoor het mijn oma zo zeggen. En eerlijk is eerlijk, geef haar eens ongelijk.

Op 1 oktober is het de Internationale Dag van de Ouderen. Het thema van dit jaar draait om een wereld waarin we steeds langer leven en wat dat vraagt van de systemen om ons heen. En daar horen wat mij betreft ook digitale systemen bij.

Want als we systemen ontwerpen die een leven lang mee moeten kunnen, moeten we er ook rekening mee houden dat onze mogelijkheden veranderen naarmate we ouder worden. Denk aan het achteruitgaan van ons zicht en gehoor, maar ook onze fijne motoriek.

Een klein kruisje om een venster te sluiten, twee knoppen die nét iets te dicht bij elkaar staan of een piepklein icoontje waar je precies op moet klikken. Als je moeite hebt met kleine, nauwkeurige bewegingen, maakt dat de bediening toch wel onnodig uitdagend.

Als we WCAG-succescriterium 2.5.8 Grootte van het aanwijsgebied (minimum) volgen, maken we dat allemaal een stuk makkelijker.

WCAG 2.5.8 – Grootte van het aanwijsgebied (minimum)

Succescriterium 2.5.8 stelt eisen aan de grootte van een aanwijsgebied. Dat is het gebied waarmee je een functie kunt bedienen door er met een muis op te klikken of op een touchscreen te tikken. Denk aan een knop of link.

Door zo’n aanwijsgebied groot genoeg te maken, hoeft iemand minder precies te mikken. Ook wordt de kans kleiner dat iemand per ongeluk het aanwijsgebied ernaast activeert. Zo wordt de bediening makkelijker.

Wat is groot genoeg?

Een aanwijsgebied moet een minimale breedte en een minimale hoogte hebben van 24 CSS-pixels, dan zit je goed. Daarvoor kijk je naar de inhoud van het interactieve element zelf, maar ook de padding en bijvoorbeeld de rand: het gehele klikbare gebied.

Voldoet het aanwijsgebied niet aan die 24x24 CSS-pixels, dan hoeft het nog niet meteen fout te zijn. Bij zo'n ondermaats aanwijsgebied wordt er gekeken of er voldoende ruimte omheen zit. Bijvoorbeeld via de margin of andere tussenruimte.

Om dat te controleren, wordt er een denkbeeldige cirkel met een diameter van 24 CSS-pixels geplaatst vanuit het midden van het aanwijsgebied. Dat wordt ook gedaan bij de daarnaast gelegen aanwijsgebieden. Is er dan géén overlap tussen die cirkels, dan is dat voor dit succescriterium door die afstand toch voldoende.

Hulpmiddelen om het aanwijsgebied te testen

Er zijn verschillende hulpmiddelen waarmee je een eerste inschatting kan maken voor de aanwijsgebieden van bedieningselementen. Een voorbeeld van zo’n tool, met bijbehorende uitleg, vind je op deze pagina. De bookmarklet kun je toevoegen aan je browser. Gebruik zo’n tool alleen voor een eerste indruk. Twijfel je daarna alsnog, bekijk dan altijd de CSS code voor de echte waardes.

Voorbeelden

Laat ik een paar voorbeelden geven om duidelijk te maken wat wel en niet voldoet.

Voorbeeld 1: lijst van linkjes

De lijstitems in dit voorbeeld hebben een hoogte van 22.5px, zonder andere afstand. Het aanwijsgebied is hierdoor kleiner dan 24x24 pixels. Conclusie: het aanwijsgebied voldoet niet.

Voorbeeld 2: carrousel

De knoppen in de carrousel zijn 20.8x20.8 pixels en hebben een rand van 1.6 pixels en horizontaal een marge van 6 pixels. Het klikbare aanwijsgebied van de knop zelf is hiermee al 24 pixels (20.8+1.6+1.6). Verder is er ook nog een extra horizontale afstand gecreëerd door de marge. Conclusie: het aanwijsgebied voldoet.

Voorbeeld 3: carrousel

De knoppen in deze carrousel zijn 10x10 pixels. Met een horizontale marge van 4 pixels komt het aanwijsgebied niet aan het minimum van 24x24 pixels. Conclusie: het aanwijsgebied voldoet niet.

Uitzonderingen

Niet alle interactieve componenten hoeven te voldoen. Er gelden een aantal uitzonderingen, bijvoorbeeld voor elementen waar een gelijkwaardig alternatief voor is, voor links in lopende tekst, of als de grootte bepaald wordt door de user-agent. Ik ga hier nu niet al te ver op in, maar mocht je daar meer over willen weten, vind je alle informatie in de W3C Understanding van SC 2.5.8. Dit is ook een handige bron als je nog meer voorbeelden wil zien voor het bepalen van het aanwijsgebied!

Niet alleen voor ouderen

Ik begon dit artikel niet voor niets met de Internationale Dag van de Ouderen. Naarmate we ouder worden, kunnen we meer moeite krijgen met fijne motoriek. Een klein aanwijsgebied of een groep knoppen die heel dicht bij elkaar staat, kan dan steeds lastiger worden om te bedienen.

Maar dit succescriterium is niet alleen voor ouderen. Dit succescriterium is voor alle mensen die moeite hebben met fijne of nauwkeurige bewegingen. Denk ook aan mensen met trillende handen (tremor), spasmen, verlamming, of mensen die afhankelijk zijn van wat minder nauwkeurig te bedienen hulptechnologieën.

En ook zonder beperking is een beetje extra ruimte vaak gewoon fijn. Dat vind ik zelf het mooie aan digitale toegankelijkheid: een aanpassing die voor sommige mensen noodzakelijk is, maakt het gebruik voor veel anderen óók een stuk prettiger. Zo help je iedereen.

Dus die knoppen waar mijn oma het over had? Die hoeven inderdaad niet zo klein. Het blijkt maar weer: oma weet wel raad.