CSS-tools

Gratis Touch Target Size Checker

Controleer interactieve elementen op WCAG 2.2 minimale grootte (2.5.8) met AA/AAA-resultaten en CSS-aanbevelingen.

Tool laden...

Wat is Touch Target Size Checker?

WCAG 2.2 succescriterium 2.5.8 Target Size vereist dat interactieve elementen een doelgebied hebben van ten minste 24x24 CSS-pixels (AA). Het AAA-niveau vereist 44x44px. Deze formaten zorgen ervoor dat mensen met motorische beperkingen of die touch-apparaten gebruiken betrouwbaar kunnen tikken of klikken op interactieve elementen zonder per ongeluk aangrenzende elementen te activeren.

Snel antwoord

WCAG 2.2 vereist dat interactieve elementen een doelgrootte hebben van ten minste 24x24px (AA) of 44x44px (AAA). Vier uitzonderingen zijn van toepassing: inline links, native besturingselementen, essentiële elementen en elementen met 24px+ afstand tot aangrenzende doelen. Gebruik CSS min-width/min-height en gap/padding om te kleine doelen te repareren.

Last updated: 2026-05-28

Beperkingen

  • Deze tool controleert alleen statische afmetingen. Het houdt geen rekening met dynamische layouts, responsieve breekpunten of zoomniveaus die de effectieve doelgrootte kunnen veranderen bij verschillende schermformaten.
  • De spatiëringsuitzondering vereist handmatige verificatie van de werkelijke afstand tussen aangrenzende doelen. Deze tool controleert de door u ingevoerde afstandswaarde maar kan geen werkelijke DOM-layoutafstanden meten.
  • WCAG 2.5.8 is een AA-vereiste op niveau in WCAG 2.2. Sommige handhavingsinstanties passen het strikter toe dan anderen, en de interpretatie van uitzonderingen varieert.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer de breedte en hoogte van uw interactieve element in CSS-pixels in.
  2. Voer de afstand tot het dichtstbijzijnde aangrenzende interactieve element in, indien bekend.
  3. Selecteer het elementtype — verschillende uitzonderingen zijn van toepassing op inline links, native besturingselementen en essentiële elementen.
  4. Bekijk het slaag-/faalresultaat en de CSS-herstelaanbevelingen.

Waarvoor je het kunt gebruiken

  • Controleer of mobiele navigatieknoppen voldoen aan de 24px AA-doelgroottevereiste.
  • Controleer of kleine icon-only knoppen voldoende afstand hebben tot aangrenzende elementen om in aanmerking te komen voor de spatiëringsuitzondering.
  • Audit een pagina op touch-toegankelijkheid voor een WCAG-nalevingsbeoordeling.

Gebruik

Praktische voorbeelden

Voorbeeld

Mobiele navigatie-icon-knoppen

Een mobiele navigatie heeft 20x20px icon-knoppen. De tool rapporteert AA-falen. Het toevoegen van 4px padding om 24x24px te bereiken, haalt AA, of het toevoegen van 24px afstand tussen knoppen kwalificeert voor de spatiëringsuitzondering.

Voorbeeld

Inline tekstlinks

Een artikel heeft inline tekstlinks die slechts 18px hoog zijn. De tool past de inline-uitzondering toe en haalt AA omdat links in tekstblokken zijn vrijgesteld van de minimale doelgrootte.

Veelgemaakte fouten

  • Aannemen dat afstand alleen de doelgrootte oplost — de spatiëringsuitzondering vereist dat het element ten minste 20px is en 24px afstand heeft tot aangrenzende doelen.
  • De inline-uitzondering toepassen op niet-inline elementen zoals losstaande knoppen of navigatielinks — de inline-uitzondering is alleen van toepassing op links in tekstblokken.
  • Desktopafmetingen controleren in plaats van CSS-pixels — CSS-pixels kunnen verschillen van apparaatpixels op schermen met hoge DPI. Gebruik altijd berekende CSS-waarden uit DevTools.

Verificatie

  1. Gebruik browser-ontwikkeltools om de berekende breedte en hoogte van het element in CSS-pixels te inspecteren.
  2. Controleer de afstand tussen aangrenzende interactieve elementen met DevTools-afstandsmeting of door de gap-, margin- en padding-eigenschappen te inspecteren.

FAQ

Vragen over Touch Target Size Checker

Wat telt als afstand tot een aangrenzend doel?

Afstand wordt gemeten van de rand van het ene doel tot de rand van het volgende dichtstbijzijnde interactieve element. Dit omvat knoppen, links, invoervelden en elk ander klikbaar element. Witruimte, margins, padding of niet-interactieve inhoud tussen doelen telt als afstand. De spatiëringsuitzondering vereist ten minste 24px vrije ruimte.

Is deze controle van toepassing op desktop en mobiel?

WCAG 2.5.8 is van toepassing op alle apparaten met pointer-invoer, inclusief desktop-muiswijzers. Hoewel het criterium was gemotiveerd door mobiele touch-toegankelijkheid, is de vereiste apparaatonafhankelijk. Desktopgebruikers met motorische beperkingen of die alternatieve aanwijsapparaten gebruiken, profiteren ook van grotere doelen.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool