Naar de inhoud
Afrekenbaar

Kennisbank

Klikvlakken van 24 bij 24 pixels: de uitzondering is belangrijker dan de regel

"Elke knop minstens 24 bij 24 pixels" is de samenvatting die overal staat, en hij klopt niet. De uitzondering doet het meeste werk.

Twee kleine knoppen dicht op elkaar en twee kleine knoppen met ruimte ertussen Links twee kleine knoppen waarvan de cirkels van 24 pixels elkaar overlappen. Rechts dezelfde knoppen verder uit elkaar, met cirkels die elkaar niet raken.
De regel gaat niet over de knop, maar over de ruimte. Past er om het midden van elke knop een cirkel van 24 pixels zonder een andere knop te raken, dan is hij groot genoeg, ook als hij zelf kleiner is.

De regel, preciezer

WCAG 2.2 vraagt (criterium 2.5.8) dat een klikvlak minstens 24 bij 24 pixels is, tenzij er genoeg ruimte omheen zit. Dat "genoeg" is meetbaar: teken een cirkel met een doorsnede van 24 pixels rond het midden van de knop. Raakt die cirkel geen andere knop, en overlapt hij geen cirkel van een andere te kleine knop, dan voldoet hij. Een pictogram van 16 bij 16 met lucht eromheen mag dus gewoon.

Er zijn nog twee uitzonderingen: knoppen die middenin een lopende zin staan (een link in een alinea), en onderdelen waarvan de browser zelf de maat bepaalt, zoals een gewoon selectievakje.

Wat wij fout deden

Onze eerste versie van deze controle keek alleen naar de afmeting. We stuurden een webshop een bericht over elf te kleine knoppen. Toen de eigenaar vroeg wélke knop dat dan was, bleek na nameten: alle elf voldeden, dankzij de ruimte eromheen. We hebben de controle herschreven zodat hij de cirkels uitrekent, het label bij een selectievakje meetelt, en knoppen in een plakkende balk niet als buren van gewone knoppen ziet. Dat is ook de reden dat dit artikel bestaat.

Waar het in een webshop echt knelt

  • De plus- en minknopjes bij het aantal in de winkelwagen, vlak naast elkaar.
  • Het prullenbakje om een regel te verwijderen, direct naast die knopjes.
  • Kleur- en maatstalen als kleine rondjes, dicht op elkaar.
  • Sociale pictogrammen in de voettekst, als rijtje tegen elkaar aan.

Het gaat dus bijna nooit om één knop, maar om knoppen die te dicht op elkaar staan. De oplossing is meestal wat marge, niet een grotere knop.

Waarom dit voor iedereen telt

Dit is niet alleen een eis voor wie een beperking heeft. Iedereen die in de trein zit, op een telefoon met één hand, mist wel eens. Het verschil is dat het voor sommige mensen elke keer misgaat.

Geldt dit nu al?

Het criterium komt uit WCAG 2.2, en de norm waarnaar de wet vandaag verwijst staat nog op 2.1. Wij melden het daarom apart in het rapport: nuttig om nu te doen, nog niet waarop je wordt afgerekend.

Bronnen

  • WCAG 2.2, succescriterium 2.5.8 Doelgrootte (minimum), inclusief de uitzonderingen voor ruimte, inline en browserbediening
  • Eigen scanner: de controle rekent sinds september 2026 de cirkel van 24 pixels uit in plaats van alleen de afmeting

Verder lezen

Gratis check van je homepage Meer uitleg