Avstand mellom interaktive komponenter

Silktide måler størrelsen på og avstanden mellom knapper, lenker og skjemakontroller på sidene dine. Små kontroller som ligger tett sammen, er lette å trykke på ved en feil, så hver kontroll bør enten være minst 24 x 24 piksler eller ha nok fri plass rundt seg.

Hvorfor dette er viktig

Alle kan bomme på en liten knapp, men for personer med skjelvinger, leddgikt eller begrenset finmotorikk gjør kontroller som ligger tett sammen en side genuint vanskelig å bruke – man kan trykke på feil lenke, sende inn feil skjema eller gi opp helt. Problemet er størst på berøringsskjermer, der en fingertupp er langt mindre presis enn en musepeker.

Dette er suksesskriterium 2.5.8 i WCAG (Target Size Minimum), et krav på nivå AA i WCAG 2.2. Det er derfor en del av samsvarsmålet de fleste organisasjoner sikter mot.

Slik løser du det

1. Gjør hvert interaktivt element minst 24 x 24 CSS-piksler. Det er vanligvis nok å angi min-width og min-height, eller legge til innvendig marg.
2. Alternativt kan du legge inn avstand mellom kontrollene, slik at et område på 24 x 24 piksler sentrert rundt hver kontroll ikke overlapper med nabokontrollene – mindre mål er akseptable når det ikke er noe annet i nærheten.
3. Vær spesielt oppmerksom på ikonknapper, pagineringslenker og ikoner for sosiale medier, som ofte er for små og ligger tett sammen.

\/* Problem: 16-pikslers ikonknapper som berører hverandre *\/
.toolbar button {
  width: 16px;
  height: 16px;
}

\/* Løsning: gjør det klikkbare området minst 24 x 24 *\/
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Slik tester Silktide dette

1. Test både mobil- og skrivebordsversjonen av hver side. Resultatene kan være forskjellige mellom de to.
2. Finn de interaktive elementene: lenker, knapper, skjemafelt og områder i bildekart.
3. Ignorer elementer som normalt ikke er synlige, for eksempel innhold som er plassert utenfor skjermen for skjermlesere, samt elementer du har unntatt fra kontrollen.
4. Godkjenn alle elementer som er minst 24 piksler brede og 24 piksler høye.
5. Ignorer kontroller som står inne i en setning eller tekstblokk, og som WCAG unntar fra denne regelen.
6. For hvert gjenværende lille element måler du avstanden til alle andre interaktive elementer. Den nødvendige avstanden er 24 piksler minus elementets bredde (vannrett) og 24 piksler minus elementets høyde (loddrett).
7. Rapporter elementet hvis en annen kontroll faller innenfor denne avstanden, med mindre begge er lenker til samme mål. Elementer som er festet til skjermen, for eksempel klebrige topptekster, sammenlignes med andre festede elementer og ikke med innholdet som ruller under dem.

Feilsøking

En liten kontroll besto kontrollen

Størrelsen alene er ikke et problem: En liten kontroll består når den har nok fri plass rundt seg, står innebygd i tekst eller bare har lenker til samme sted som naboer. Dette gjenspeiler unntakene WCAG selv tillater.

Bare noen av feilene vises

Silktide rapporterer opptil de 10 mest alvorlige eksemplene per side. Hvis du løser en delt stil, løser du vanligvis mange funn samtidig.

Jeg ønsker den strengere standarden

Denne kontrollen tester minimumskravet på nivå AA på 24 x 24 piksler. Den relaterte kontrollen Kontroller som er store nok tester den strengere anbefalingen på nivå AAA på 44 x 44 piksler.

Finn ut mer

• Understanding Target Size (Minimum) (WCAG 2.5.8)
• Technique C42: Using min-height and min-width to ensure sufficient target spacing
• Kontroller som er store nok