Afstand mellem interaktive komponenter

Silktide måler størrelsen og afstanden mellem knapper, links og formularkontrolelementer på dine sider. Små kontrolelementer, der ligger tæt sammen, er lette at trykke på ved en fejl, så hvert element bør enten være mindst 24 gange 24 pixels eller have tilstrækkelig fri plads omkring sig.

Hvorfor dette er vigtigt

Alle kan overse en lille knap, men for personer med rystelser, gigt eller begrænset finmotorik gør tæt placerede kontrolelementer en side reelt svær at bruge – man trykker på det forkerte link, indsender den forkerte formular eller giver helt op. Problemet er værst på berøringsskærme, hvor en fingerspids er langt mindre præcis end en musemarkør.

Dette er WCAG-succeskriterium 2.5.8 (Målstørrelse (minimum)), et niveau AA-krav i WCAG 2.2, og er derfor en del af det overensstemmelsesmål, som de fleste organisationer sigter mod.

Sådan løser du det

1. Gør hvert interaktivt element mindst 24 gange 24 CSS-pixels. Det er som regel nok at angive min-width og min-height eller tilføje indvendig afstand.
2. Du kan også tilføje plads mellem kontrolelementerne, så et område på 24 gange 24 pixels, der er centreret om hvert kontrolelement, ikke overlapper med tilstødende elementer – mindre mål er acceptable, når der ikke er andet tæt på.
3. Vær særligt opmærksom på ikonknapper, pagineringslinks og ikoner til sociale medier, som ofte er for små og placeret tæt sammen.

/* Problem: Ikonknapper på 16 px rører hinanden */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* Løsning: Gør det klikbare område mindst 24x24 */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Sådan tester Silktide dette

1. Test både mobil- og desktopversionen af hver side; resultaterne kan variere mellem de to.
2. Find de interaktive elementer: links, knapper, formularfelter og områder i billedkort.
3. Ignorer elementer, der normalt ikke er synlige, såsom indhold placeret uden for skærmen til skærmlæsere, samt de elementer, du har udelukket fra tjek.
4. Godkend ethvert element, der er mindst 24 pixels bredt og 24 pixels højt.
5. Ignorer kontrolelementer, der ligger inde i en sætning eller tekstblok, da WCAG undtager dem fra denne regel.
6. Mål for hvert resterende lille element afstanden til alle andre interaktive elementer. Den krævede afstand er 24 pixels minus elementets bredde (vandret) og 24 pixels minus dets højde (lodret).
7. Rapportér elementet, hvis et andet kontrolelement ligger inden for denne afstand, medmindre begge er links til samme destination. Elementer, der er fastgjort til skærmen, såsom faste sidehoveder, sammenlignes med andre fastgjorte elementer frem for med indholdet, der ruller under dem.

Fejlfinding

Et lille kontrolelement bestod tjekket

Størrelsen alene er ikke en fejl: Et lille kontrolelement består, når det har tilstrækkelig fri plads omkring sig, ligger integreret i tekst eller kun er ved siden af links, der peger på samme sted. Dette afspejler de undtagelser, som WCAG selv tillader.

Kun nogle fejl er angivet

Silktide rapporterer op til de 10 mest alvorlige eksempler pr. side. En rettelse af en fælles stil løser normalt mange fund på én gang.

Jeg vil have den strengere standard

Dette tjek tester minimumskravet på niveau AA på 24 gange 24 pixels. Det relaterede tjek Kontrolelementer, der er store nok tester den strengere anbefaling på niveau AAA på 44 gange 44 pixels.

Få mere at vide

• Forstå Målstørrelse (minimum) (WCAG 2.5.8)
• Teknik C42: Brug af min-height og min-width til at sikre tilstrækkelig afstand mellem mål
• Kontrolelementer, der er store nok