Een klein icoon mag. Een onraakbare knop liever niet.

Een prullenbakje van zestien pixels kan er prima uitzien. Maar waar moet je klikken om het te bedienen? Precies op het tekeningetje, op een groter vlak eromheen, of per ongeluk op de knop ernaast? Dat is een ontwerpvraag die je pas goed beantwoordt als je het werkelijke actieve oppervlak bekijkt.

WCAG 2.2 bevat hiervoor succescriterium 2.5.8, Target Size (Minimum), op niveau AA. Het gaat om doelen voor aanwijzerbediening, dus niet uitsluitend om aanraken op een telefoon. In dit artikel onderscheiden we de norm van een praktische ontwerpkeuze. Een geslaagde controle van deze ene eis is geen bewijs dat de volledige interface toegankelijk is.

De maat geldt voor het actieve oppervlak

De hoofdregel is minimaal 24 bij 24 CSS-pixels. Dat zijn geen fysieke schermpixels. Een klein zichtbaar pictogram kan binnen een grotere werkende knop staan. Meet daarom het klikbare vlak, niet alleen de afbeelding. Volgens de W3C-toelichting moet een horizontaal en verticaal uitgelijnd vierkant van 24 bij 24 volledig in dat vlak passen; alleen een omvattend kader van die maat is bij afwijkende vormen onvoldoende.

Ontwerp een rij knoppen daarom eerst als bedienbare vlakken en plaats de pictogrammen daarin. Onzichtbare padding helpt alleen als klikken in die padding daadwerkelijk dezelfde actie uitvoert. Een fraai ruim kader in Figma bewijst niets over de implementatie.

De vijf uitzonderingen, zonder ze op te rekken

• Afstand: voor ieder te klein doel plaats je een cirkel met diameter 24 CSS-pixels op het midden van zijn begrenzingsvak. Die mag geen ander doel of zo’n cirkel van een ander te klein doel overlappen.
• Gelijkwaardig: dezelfde functie is beschikbaar via een andere bediening op dezelfde pagina die aan dit criterium voldoet.
• Inline: het doel staat in een zin, of de maat wordt anderszins begrensd door de regelhoogte van tekst die geen doel is.
• Browserbediening: de browser bepaalt de doelgrootte en de maker heeft die niet aangepast.
• Essentieel: juist deze presentatie is essentieel of wettelijk voorgeschreven voor de overgebrachte informatie.

“Ons ontwerp is compact” is dus geen uitzondering. Een rij losse navigatielinks is ook niet automatisch inline omdat er tekst in staat. Leg bij een beroep op een uitzondering vast welk doel het betreft en waarom de voorwaarden gelden. Zonder die onderbouwing blijft de beoordeling open.

Een fictieve werkbalk, van misser naar herstel

Stel: je ontwerpt een fictieve bestandslijst met naast iedere bestandsnaam drie acties: bekijken, downloaden en verwijderen. De pictogrammen én hun rechthoekige actieve vlakken zijn elk 16 bij 16 CSS-pixels. De horizontale ruimte ertussen is 4 pixels; de middelpunten liggen op dezelfde hoogte. Dit is een uitgewerkt rekenvoorbeeld, geen meting van een echte website.

INVOER
Drie actieve vlakken: ieder 16 × 16 CSS-pixels.
Afstand tussen opeenvolgende vlakken: 4 CSS-pixels.
Middelpuntafstand: 8 + 4 + 8 = 20 CSS-pixels.

CONTROLE
De doelen voldoen niet aan de hoofdmaat.
Twee controlecirkels met diameter 24 hebben samen 24 pixels ruimte tussen hun middelpunten nodig om niet te overlappen.
Bij 20 pixels overlappen ze. Ook de afstandsuitzondering helpt dit ontwerp niet.

Je kunt het rekenprobleem oplossen door de ruimte tussen deze gelijke vlakken te vergroten. Kies bijvoorbeeld 10 pixels: de middelpunten liggen dan 26 pixels uiteen. Dat is voor deze drie doelen voldoende voor de cirkelcontrole, mits ook andere nabije doelen vrij blijven. Het blijven echter kleine vlakken om te raken. Voor deze werkbalk kiezen we daarom een grotere bediening.

ONTWERP
Het pictogram blijft 16 × 16 CSS-pixels.
Elk werkelijk actief vlak wordt een rechthoek van 40 × 40 CSS-pixels.
Tussen de vlakken blijft 8 CSS-pixels ruimte.

VERWACHTE UITKOMST
Alle drie bevatten een vierkant van 24 × 24 en voldoen rechtstreeks aan de grootte-eis.
De keuze voor 40 en 8 is onze ontwerpkeuze voor deze werkbalk, geen maatvoering die 2.5.8 voorschrijft.
Klikken in de padding activeert uitsluitend de bijbehorende knop.

Test wat de gebruiker werkelijk kan raken

1. Open de implementatie op een smalle en een brede viewport. Noteer de browser, viewport en toestand. Controleer ook een geopende werkbalk en eventuele menuopties; die kunnen andere afmetingen hebben.
2. Inspecteer de actieve elementen met ontwikkelaarstools. Meet in CSS-pixels en controleer welke delen werkelijk reageren. Test het midden en de padding. Kijk of een overlay of buurknop een deel van het doel overneemt.
3. Markeer doelen die geen vierkant van 24 bij 24 bevatten. Controleer daarvoor alle naburige doelen met de cirkelmethode, ook boven en onder de rij. Reken niet alleen horizontaal.
4. Gebruik een eventuele uitzondering alleen met vastgelegde reden. Schrijf anders een concrete reparatie: groter actief vlak, meer afstand of een andere indeling.
5. Test opnieuw na de wijziging. Controleer daarnaast apart toegankelijke namen, toetsenbordbediening, focus en gedrag. Een groter vlak repareert die onderdelen niet vanzelf.

Voer de kliktest uit in een veilige testomgeving met fictieve bestanden. Een verwijderknop hoort niet op echte klantdata te worden uitgeprobeerd. Noteer bij iedere bevinding wat gemeten is en wat nog een verwachting is: “ontwerp 40 bij 40” is iets anders dan “in de browser gemeten en padding getest”.

De beslisregel is eenvoudig: past het vierkant, dan is deze maateis afgedekt. Past het niet, bewijs een geldige uitzondering of pas het ontwerp aan. En ook als het minimum gehaald wordt, mag de vraag blijven: kan iemand deze belangrijke actie ontspannen bedienen? Een normcontrole geeft een ondergrens, geen reden om het raakvlak zo klein mogelijk te maken.

Beeld: AI-gegenereerde clay-illustratie, geen productscreenshot of bewijs van klantresultaten.