Avstånd mellan interaktiva komponenter

Silktide mäter storleken på och avståndet mellan knappar, länkar och formulärkontroller på dina sidor. Små kontroller som ligger tätt ihop är lätta att trycka på av misstag, så varje kontroll bör antingen vara minst 24 gånger 24 pixlar eller ha tillräckligt med fritt utrymme runt sig.

Varför detta är viktigt

Vem som helst kan missa en liten knapp, men för personer med darrningar, artrit eller begränsad finmotorik kan tätt placerade kontroller göra en sida verkligen svår att använda – man trycker på fel länk, skickar in fel formulär eller ger upp helt. Problemet är störst på pekskärmar, där en fingertopp är betydligt mindre exakt än en muspekare.

Detta är framgångskriterium 2.5.8 (Målstorlek (minimum)), ett krav på i WCAG 2.2, och ingår därför i det överensstämmelsemål som de flesta organisationer strävar efter.

Så åtgärdar du problemet

Gör varje interaktivt element minst 24 gånger 24 -pixlar. Att ange min-width och min-height, eller lägga till utfyllnad, är vanligtvis tillräckligt.
Alternativt kan du lägga till utrymme mellan kontrollerna så att ett område på 24 gånger 24 pixlar, centrerat kring varje kontroll, inte överlappar dess grannar – mindre mål är godtagbara när inget annat finns i närheten.
Var särskilt uppmärksam på ikonknappar, pagineringslänkar och ikoner för sociala medier, som ofta är för små och placerade tätt ihop.

\/* Problem: ikonknappar på 16 px som ligger intill varandra *\/
.toolbar button {
  width: 16px;
  height: 16px;
}

\/* Åtgärd: förstora det klickbara området till minst 24 x 24 *\/
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Så testar Silktide detta

Testa både mobil- och datorversionerna av varje sida; resultaten kan skilja sig mellan dem.
Hitta de interaktiva elementen: länkar, knappar, formulärfält och områden i bildkartor.
Ignorera element som normalt inte är synliga, till exempel innehåll som är placerat utanför skärmen för , samt alla element som du har undantagit från kontrollen.
Godkänn alla element som är minst 24 pixlar breda och 24 pixlar höga.
Ignorera kontroller som finns inuti en mening eller ett textblock, eftersom WCAG undantar dessa från regeln.
Mät avståndet från varje återstående litet element till alla andra interaktiva element. Det avstånd som krävs är 24 pixlar minus elementets bredd (horisontellt) och 24 pixlar minus dess höjd (vertikalt).
Rapportera elementet om en annan kontroll faller inom detta avstånd, såvida inte båda är länkar till samma mål. Element som är fästa vid skärmen, till exempel fasta sidhuvuden, jämförs med andra fasta element och inte med innehållet som rullas under dem.

Felsökning

En liten kontroll klarade kontrollen

Storleken i sig innebär inte ett fel: en liten kontroll godkänns när den har tillräckligt med fritt utrymme runt sig, ligger direkt i texten eller bara har grannlänkar som leder till samma plats. Detta återspeglar undantagen som WCAG själv tillåter.

Bara vissa fel visas

Silktide rapporterar upp till de 10 allvarligaste exemplen per sida. Om du åtgärdar en gemensam stil löses vanligtvis många resultat på en gång.

Jag vill använda den striktare standarden

Den här kontrollen testar nivå AA:s minimikrav på 24 gånger 24 pixlar. Den relaterade kontrollen Tillräckligt stora kontroller testar den striktare rekommendationen på nivå AAA: 44 gånger 44 pixlar.