Standarder · WCAG 2.2

SC 2.5.8 Nivå AA WCAG 2.2 Nytt i 2.2

Målstorlek (minimum)

Interaktiva mål — knappar, länkar, formulärkontroller — måste vara minst 24×24 CSS-pixlar, om inte ett likvärdigt mål på samma sida är tillräckligt stort eller målet befinner sig i en mening. Nytt i WCAG 2.2.

Vad det kräver

Varje interaktiv kontroll på sidan måste ha en träffyta på minst 24×24 CSS-pixlar — eller ha tillräckligt mellanrum runt sig så att en 24×24-cirkel centrerad på målet inte skär in i något annat mål. Avsikten är att förhindra att användare med begränsad finmotorik, tremor eller pekskärm i rörelse missar målet och aktiverar fel åtgärd.

WCAG 2.2 sätter minimumet till 24×24; det befintliga AAA-nivåkravet 2.5.5 behåller det mer ambitiösa 44×44-målet.

Hur du uppfyller det

  • Sätt min-width / min-height på 24px för ikon-only-knappar, stäng-knappar och alla tryckmål som är mindre än en typisk knapp.
  • För inline-länkar i stycken är du undantagen — framgångskriteriet tillåter uttryckligen mål “i en mening”.
  • För ikonrader (verktygsfältsknappar, tabellradsåtgärder), använd padding för att öka träffytan till 24×24 även när ikonglyfen är mindre.
  • För kontroller som måste förbli visuellt små (ett litet ”×” på ett chip), lägg till marginal/mellanrum så att angränsande mål är minst 24px från varandra centrum-till-centrum.
  • Granska sidnumrering, brödsmulor, tabellradsåtgärder och verktygsfältsikonerna först — det är där felen samlas.

Vanliga fel

  • 16×16 ikonknappar (stäng, redigera, ta bort) utan padding, särskilt i tabeller och verktygsfält.
  • Täta sidnumreringsrader där Föregående / 1 / 2 / 3 / Nästa sitter i 18px-boxar tätt mot varandra.
  • Anpassade kryssrutor/radioknappar stilsatta mindre än den nativa kontrollen av “minimalistiska” skäl.
  • Flytande åtgärdsknappar på mobil som överstiger 24×24 men sitter för nära andra tryckmål.
  • Tag-ta-bort-”ד-knappar på 10–14 pixlar — extremt vanligt i chip-baserade filter-UI:n.

Undantag värda att känna till

Framgångskriteriet har fem undantag: likvärdigt (ett större mål på samma sida gör samma sak), inline (i en mening), user-agent-kontroll (webbläsarens standard, t.ex. nativ <select>), nödvändig (den lilla storleken krävs för att förmedla informationen, t.ex. en kartnål) och överensstämmande (en mer generell regel tvingar storleken — sällsynt).

Varför det spelar roll

Målstorleksfel dyker upp oproportionerligt mycket i mobiltestning och för användare med Parkinsons sjukdom, essentiell tremor, multipel skleros eller alla som använder en pekskärm med en hand på tåget. Förändringen från “inget minimum” i 2.1 till ett 24×24-golv i 2.2 överraskade de flesta produktionssajter — förvänta dig att det här är det mest citerade nya framgångskriteriet i 2026 års granskningar.