Meet je knoppen met de inspecteur van je browser

Hiervoor is geen software nodig die je moet installeren. De browser toont de maat van elk onderdeel.

Eén knop meten:

Klik met de rechtermuisknop op de knop en kies Inspecteren.
Beweeg de muis over het onderdeel in de code. De browser tekent het gebied op de pagina en zet de maat erbij, bijvoorbeeld 18 × 18.
Is een van beide getallen kleiner dan 24, meet dan de ruimte tot de knop ernaast.

Een hele pagina in één keer: plak dit in het tabblad Console. Het zet een rode rand om elke knop en link die te klein is.

document.querySelectorAll('a, button, input, select, summary')
  .forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.width < 24 || r.height < 24) {
      el.style.outline = '2px solid red';
      console.log(Math.round(r.width) + '×' + Math.round(r.height), el);
    }
  });

Het lijstje is een beginpunt en geen oordeel. Een knop van 20 bij 20 met 30 pixels ruimte eromheen voldoet gewoon, en een link in een lopende zin is uitgezonderd. Het script kent dat verschil niet.

Doe de test ook op een smal scherm. Knoppen die op een breed scherm ruim staan, komen op een telefoon tegen elkaar aan.