Succescriterium 2.5.8 Grootte van het aanwijsgebied (minimum)

Niveau AA

Lees de officiële tekst van succescriterium 2.5.8 Grootte van het aanwijsgebied (minimum)

• Grootte van knoppen: wat het criterium vraagt

  Een knop of link moet minstens 24 bij 24 pixels groot zijn. Is hij kleiner, dan moet er minstens 24 pixels ruimte omheen zitten waar geen andere knop staat. Een vingertop is ongeveer een centimeter breed, zo’n 40 pixels, en dus groter dan een sluitkruisje van 16 bij 16.

  Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA. Vierentwintig is een ondergrens en geen streefwaarde: voor een vinger is 44 pixels prettiger. Apple en Google houden in hun eigen richtlijnen 44 en 48 aan.

  Dit raakt vooral:

  • Bezoekers met trillende handen, door parkinson, MS of ouderdom.
  • Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
  • Bezoekers met één werkende hand, die de telefoon vasthouden en bedienen met dezelfde duim.

  Een link in een lopende zin is uitgezonderd. Die is niet groter te maken zonder de tekst te verstoren.

  Thema’s

  Bediening Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Aanwijzer Oogbesturing

  Open dit onderwerp op een eigen pagina

• Grootte van knoppen: zo meet je het

  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.

  Thema’s

  Bediening Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Aanwijzer Oogbesturing

  Open dit onderwerp op een eigen pagina

• Grootte van knoppen: het aanwijsgebied

  Knoppen hoeven er niet groter uit te zien. Het gaat om het gebied dat op een tik reageert, en dat mag onzichtbaar zijn.

  De eenvoudigste oplossing laat het pictogram op 16 pixels staan en maakt de knop eromheen 24:

  .icoonknop {
    min-inline-size: 24px;
    min-block-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  Is er echt geen ruimte, vergroot het gebied dan met een onzichtbare laag over de knop heen. Het beeld blijft klein, het doel wordt groot:

  .icoonknop { position: relative; }
  
  .icoonknop::after {
    content: "";
    position: absolute;
    inset: -8px;          /* 8 pixels extra aan elke kant */
  }

  Let op dat twee van die vergrote gebieden elkaar niet overlappen. Dan raakt de bezoeker de verkeerde knop.

  Waar het meestal misgaat:

  • Rijen pictogrammen naast elkaar in een tabel of werkbalk.
  • Het sluitkruisje van een venster. Dat is bijna altijd te klein, terwijl het de knop is die iemand onder tijdsdruk zoekt.
  • Paginanummers onder een lijst, vaak 20 bij 20 met een paar pixels ertussen.

  Thema’s

  Bediening Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Aanwijzer Oogbesturing

  Open dit onderwerp op een eigen pagina