Afstand tussen interactieve componenten

Silktide meet de grootte en tussenruimte van knoppen, links en formulierbesturingselementen op je pagina's. Kleine besturingselementen die dicht op elkaar staan, kunnen gemakkelijk per ongeluk worden ingedrukt. Daarom moet elk besturingselement minstens 24 bij 24 pixels groot zijn of voldoende vrije ruimte eromheen hebben.

Waarom dit belangrijk is

Iedereen kan een kleine knop missen, maar voor mensen met tremoren, artritis of beperkte fijne motoriek maken dicht op elkaar geplaatste besturingselementen een pagina echt moeilijk te gebruiken: op de verkeerde link tikken, het verkeerde formulier verzenden of het helemaal opgeven. Het probleem is het grootst op aanraakschermen, waar een vingertop veel minder nauwkeurig is dan een muisaanwijzer.

Dit is succescriterium 2.5.8 (Minimale doelgrootte) van , een vereiste op in WCAG 2.2. Het maakt daarom deel uit van het conformiteitsniveau waar de meeste organisaties naar streven.

Zo los je dit op

Maak elk interactief element minstens 24 bij 24 -pixels groot. Het instellen van min-width en min-height of het toevoegen van opvulling is meestal voldoende.
Voeg anders ruimte tussen besturingselementen toe, zodat een gebied van 24 bij 24 pixels rond het midden van elk besturingselement niet overlapt met aangrenzende besturingselementen. Kleinere doelen zijn acceptabel wanneer er niets anders dichtbij staat.
Let vooral op pictogramknoppen, pagineringslinks en pictogrammen voor sociale media. Deze zijn vaak te klein en staan dicht bij elkaar.

\/* Probleem: pictogramknoppen van 16 px die elkaar raken *\/
.toolbar button {
  width: 16px;
  height: 16px;
}

\/* Oplossing: vergroot het klikbare gebied tot minstens 24x24 *\/
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Zo test Silktide dit

Test zowel de mobiele als de desktopversie van elke pagina; de resultaten kunnen tussen beide verschillen.
Zoek de interactieve elementen: links, knoppen, formuliervelden en gebieden van afbeeldingskaarten.
Negeer elementen die normaal niet zichtbaar zijn, zoals inhoud die buiten het scherm is geplaatst voor , en alle elementen die je hebt uitgesloten van controles.
Laat elk element door dat minstens 24 pixels breed en 24 pixels hoog is.
Negeer besturingselementen die in een zin of tekstblok staan; WCAG stelt deze vrij van deze regel.
Meet voor elk overgebleven klein element de afstand tot elk ander interactief element. De vereiste afstand is 24 pixels min de breedte van het element (horizontaal) en 24 pixels min de hoogte (verticaal).
Rapporteer het element als een ander besturingselement binnen die afstand valt, tenzij beide links naar dezelfde bestemming zijn. Elementen die aan het scherm zijn vastgemaakt, zoals sticky headers, worden vergeleken met andere vastgemaakte elementen en niet met de inhoud die eronder scrolt.

Problemen oplossen

Een klein besturingselement is geslaagd voor de controle

Grootte alleen is geen reden voor een fout: een klein besturingselement slaagt voor de controle wanneer het voldoende vrije ruimte eromheen heeft, inline in tekst staat of alleen links ernaast heeft die naar dezelfde plek verwijzen. Dit weerspiegelt de uitzonderingen die WCAG zelf toestaat.

Er worden slechts enkele fouten vermeld

Silktide rapporteert maximaal de 10 ernstigste voorbeelden per pagina. Door een gedeelde stijl te corrigeren, worden vaak veel bevindingen tegelijk opgelost.

Ik wil de strengere standaard

Deze controle test het minimale niveau AA van 24 bij 24 pixels. De gerelateerde controle Besturingselementen die groot genoeg zijn test de strengere aanbeveling op niveau AAA van 44 bij 44 pixels.