Små mobila kontroller

Silktide läser in varje sida på en simulerad mobil enhet och rapporterar länkar, knappar och formulärkontroller som är för små för att pålitligt kunna tryckas på. Kontroller måste vara minst 12 pixlar breda och 12 pixlar höga för att klara kontrollen.

Varför detta är viktigt

Fingrar är mindre precisa än muspekare. En kontroll som är enkel att klicka på dator kan vara nästan omöjlig att trycka på en telefon – besökare missar, träffar länken bredvid i stället och hamnar någonstans där de inte avsåg att hamna. Personer med motoriska funktionsnedsättningar, darrningar eller större fingrar påverkas mest, men alla råkar trycka fel på små mål.

Tröskelvärdet på 12 pixlar fångar bara de allvarligt underdimensionerade kontrollerna; bekväma tryckmål är betydligt större (vanliga riktlinjer föreslår omkring 44 pixlar).

Så här åtgärdar du det

Öka storleken på den flaggade kontrollen – större text, mer utfyllnad eller en uttrycklig minsta storlek i :

/* Ge tryckmål en bekväm minsta storlek */
a.icon-button {
  min-width: 44px;
  min-height: 44px;
}

För länkar som endast består av ikoner gör du det tryckbara området större än själva ikonen med hjälp av utfyllnad, i stället för att förstora ikonen.
Om ett element inte alls ska vara interaktivt – till exempel en tom kvarlämnad länk – tar du bort det i stället för att ändra storleken.

Så här testar Silktide detta

Läs in sidan på en simulerad mobil enhet.
Hitta alla interaktiva kontroller: länkar, områden i bildkartor, formulärfält, rullgardinsmenyer, textområden och knappar.
Hoppa över kontroller som är dolda när sidan läses in, saknar storlek eller befinner sig helt utanför skärmen.
Mät varje återstående kontroll och rapportera de som är smalare eller kortare än 12 pixlar.

Felsökning

Elementet visas först efter interaktion

Silktide mäter sidan medan den läses in. Kontroller i menyer eller paneler som öppnas senare mäts i sitt ursprungliga tillstånd, vilket ibland kan flagga ett element mitt under en animering. Om kontrollen har en bekväm storlek när den faktiskt kan användas kan du resultatet.

Hur hänger detta ihop med WCAG:s regler för målstorlek?

Den här kontrollen gäller mobil användbarhet och har ett avsiktligt generöst tröskelvärde. De relaterade -kontrollerna – Målstorlek (minimum) på Nivå AA och Rimlig målstorlek på – ställer striktare storlekskrav med mer nyanserade undantag.