Små mobilkontroller

Silktide laster inn hver side på en simulert mobilenhet og rapporterer lenker, knapper og skjemakontroller som er for små til å trykke på på en pålitelig måte. Kontroller må være minst 12 piksler brede og 12 piksler høye for å bestå.

Hvorfor dette er viktig

Fingre er mindre presise enn musepekere. En kontroll som er enkel å klikke på i en nettleser på en datamaskin, kan være nesten umulig å trykke på en telefon – besøkende bommer, treffer lenken ved siden av i stedet og ender opp et sted de ikke hadde til hensikt å gå. Personer med motoriske funksjonsnedsettelser, skjelvinger eller større fingre blir mest berørt, men alle bommer noen ganger på små mål.

Terskelen på 12 piksler fanger bare opp kontroller som er alvorlig for små; komfortable trykkmål er betydelig større (vanlige retningslinjer anbefaler rundt 44 piksler).

Slik løser du det

Øk størrelsen på den flaggede kontrollen – større tekst, mer innvendig marg eller en eksplisitt minimumsstørrelse i :


/* Gi trykkmål en komfortabel minimumsstørrelse */
a.icon-button {
  min-width: 44px;
  min-height: 44px;
}

For lenker som bare består av ikoner bør du gjøre det trykkbare området større enn selve ikonet ved hjelp av innvendig marg, i stedet for å gjøre ikonet større.
Hvis et element ikke skal være interaktivt i det hele tatt – for eksempel en tom lenke som ligger igjen – bør du fjerne det i stedet for å endre størrelsen.

Slik tester Silktide dette

Last inn siden på en simulert mobilenhet.
Finn alle interaktive kontroller: lenker, områder i bildekart, skjemafelt, rullegardinmenyer, tekstområder og knapper.
Hopp over kontroller som er skjult når siden lastes inn, ikke har noen størrelse eller befinner seg helt utenfor skjermen.
Mål hver gjenværende kontroll og rapporter de som er smalere eller kortere enn 12 piksler.

Feilsøking

Elementet vises først etter samhandling

Silktide måler siden mens den lastes inn. Kontroller i menyer eller paneler som åpnes senere, måles i utgangstilstanden. Dette kan av og til flagge et element midt i en animasjon. Hvis kontrollen har en komfortabel størrelse når den faktisk kan brukes, kan du funnet.

Hvordan henger dette sammen med WCAG-reglene for målestørrelse?

Denne kontrollen er en kontroll av brukervennlighet på mobil med en bevisst lempelig terskel. De relaterte -kontrollene – Målstørrelse på nivå AA og Rimelig målstørrelse på – stiller strengere krav til størrelse, med mer nyanserte unntak.