Aanraakdoelgrootte
Zie ook: target size, tap target, hit target
De minimumafmeting van interactieve elementen die via aanwijzerinvoer worden geactiveerd. WCAG 2.5.5 (AAA) vereist 44×44 CSS-pixels; WCAG 2.5.8 (AA, nieuw in 2.2) vereist 24×24. Kritisch voor gebruikers met motorische beperkingen en mobiele gebruikers.
Aanraakdoelgrootte is de werkzame afmeting van elk element dat een gebruiker kan tikken of klikken. WCAG stelt twee drempelwaarden: een AAA-minimum van 44×44 CSS-pixels (since WCAG 2.1) en een AA-minimum van 24×24 CSS-pixels (nieuw in WCAG 2.2). Het criterium bestaat omdat motorische beperkingen — en zelfs gewone onnauwkeurigheid op een klein scherm — kleine doelen onbruikbaar maken.
De twee WCAG-criteria
- 2.5.5 Target Size (Enhanced) — niveau AAA — aanwijzerinvoerdoelen moeten minimaal 44×44 CSS-pixels zijn. Langstaande regel; moeilijk sitebreed te bereiken.
- 2.5.8 Target Size (Minimum) — niveau AA, nieuw in WCAG 2.2 — aanwijzerinvoerdoelen moeten minimaal 24×24 CSS-pixels zijn. De praktische nalevingsondergrens.
Een doel dat aan de 44×44 AAA-drempel voldoet, voldoet ook aan de 24×24 AA-drempel.
Wat de regel daadwerkelijk vereist
De getallen verwijzen naar het doelgebied, niet alleen het zichtbare pictogram. Apple’s Human Interface Guidelines en Google’s Material Design hanteren beide standaard 44pt / 48dp doelafmetingen om dezelfde reden — er liggen echte ergonomische gegevens aan ten grondslag.
Een veelvoorkomend patroon: een pictogramknop getekend als een 16×16 SVG, maar met opvulling waardoor het klikbare gebied 44×44 is. Dat voldoet aan de regel. Het zichtbare pictogram is klein; het doel is het zichtbare pictogram plus het opgevulde gebied eromheen.
Uitzonderingen
2.5.8 (het AA-criterium) heeft expliciete uitzonderingen:
- Op afstand gebaseerde uitzondering. Als een doel minimaal 24×24 is of omgeven is door voldoende witruimte zodat geen ander doel binnen 24 CSS-pixels valt, slaagt het. Dit beschermt dichte inline-indelingen (zoals tekstkoppelingen in lopende tekst) die kleine doelgebieden hebben maar ver genoeg uit elkaar staan om geen buur per ongeluk te tikken.
- Equivalent bedieningselement elders. Een klein doel is acceptabel als dezelfde functie beschikbaar is via een ander groter bedienings element op dezelfde pagina.
- Inline doelen. Koppelingen in lopende tekst zijn vrijgesteld — lopende tekst hoeft niet opnieuw te worden opgemaakt vanwege een 24-pixel-per-koppeling-regel.
- Door user-agent bepaald. Standaardbrowserbesturingselementen zijn vrijgesteld.
- Essentieel. Wanneer de grootte essentieel is voor de functie (bijv. een CAPTCHA-raster).
Wat dit in de praktijk beïnvloedt
Drie veelvoorkomende productiefouten:
- Pictogramnavigatieknoppen van 28×28. Voldoet niet aan 2.5.8, tenzij omgeven door voldoende witruimte — wat de meeste dichte navigatiebalken niet hebben.
- Strak gegroepeerde selectievakjeslijsten. Selectievakjes getekend als 16×16 zonder opvulling, verticaal gerangschikt zonder tussenruimte. Zowel het doel als de afstand voldoen niet aan de regel.
- Mobiele carrousel-pijlen “vorige/volgende”. Vaak getekend als 32-pixel chevrons met 4 pixels opvulling. Voldoet niet aan 2.5.8.
De snelste handmatige audit
Open DevTools op een voor mobiel geëmuleerd viewport. Inspecteer elk interactief element. Noteer de begrenzingsbox. Alles onder 24 CSS-pixels in één van de afmetingen, met aangrenzende doelen binnen 24 CSS-pixels, voldoet niet aan 2.5.8.
De meeste teams nemen een doelgrootte-ontwerptoken op in alle componenten — elk interactief element krijgt minimaal een 44×44 trefgebied ongeacht zichtbare grootte. Dat is de goedkoopste manier om de regel geen probleem te laten zijn.