Små kontrolelementer på mobil

Silktide indlæser hver side på en simuleret mobilenhed og rapporterer links, knapper og formularfelter, der er for små til at kunne trykkes på pålideligt. Kontrolelementer skal være mindst 12 pixels brede og 12 pixels høje for at bestå.

Hvorfor det er vigtigt

Fingre er mindre præcise end musemarkører. Et kontrolelement, der er nemt at klikke på på en computer, kan være næsten umuligt at trykke på på en telefon – besøgende rammer ved siden af, trykker i stedet på det tilstødende link og ender et sted, de ikke havde til hensigt. Personer med motoriske funktionsnedsættelser, rystelser eller større fingre påvirkes mest, men alle kan fejltaste på små mål.

Grænsen på 12 pixels fanger kun de alvorligt underdimensionerede kontrolelementer; behagelige trykmål er betydeligt større (almindelige anbefalinger foreslår omkring 44 pixels).

Sådan løser du det

Forøg størrelsen på det markerede kontrolelement – større tekst, mere padding eller en eksplicit minimumsstørrelse i :

/* Giv trykmål en behagelig minimumsstørrelse */
a.icon-button {
  min-width: 44px;
  min-height: 44px;
}

For links, der kun består af ikoner, skal du gøre det trykbare område større end selve ikonet ved hjælp af padding i stedet for at forstørre ikonet.
Hvis et element slet ikke bør være interaktivt – f.eks. et tomt, overflødigt link – skal du fjerne det i stedet for at ændre størrelsen på det.

Sådan tester Silktide dette

Indlæs siden på en simuleret mobilenhed.
Find alle interaktive kontrolelementer: links, områder i billedkort, formularfelter, rullemenuer, tekstområder og knapper.
Spring kontrolelementer over, som er skjult, når siden indlæses, ikke har nogen størrelse eller ligger helt uden for skærmen.
Mål hvert resterende kontrolelement, og rapportér dem, der er smallere eller lavere end 12 pixels.

Fejlfinding

Elementet vises kun efter interaktion

Silktide måler siden, mens den indlæses. Kontrolelementer i menuer eller paneler, der åbnes senere, måles i deres oprindelige tilstand, hvilket lejlighedsvis kan markere et element midt i en animation. Hvis kontrolelementet har en behagelig størrelse, når det faktisk kan bruges, kan du fundet.

Hvordan hænger dette sammen med WCAG-reglerne for målstørrelse?

Dette tjek er et tjek af brugervenlighed på mobil med en bevidst lempelig grænse. De relaterede -tjek – Target size på niveau AA og Rimelig målstørrelse på – anvender strengere størrelseskrav med mere nuancerede undtagelser.