Tryckmålsstorlek
Se även: target size, tap target, hit target
Minimistorleken på interaktiva element som aktiveras via pekarinmatning. WCAG 2.5.5 (AAA) kräver 44×44 CSS-pixlar; WCAG 2.5.8 (AA, ny i 2.2) kräver 24×24. Avgörande för användare med motoriska funktionsnedsättningar och för småskärmsanvändare generellt.
Tryckmålsstorlek är den operativa dimensionen på ett element som användaren kan trycka på eller klicka. WCAG sätter två trösklar: ett AAA-minimum på 44×44 CSS-pixlar (sedan WCAG 2.1) och ett AA-minimum på 24×24 CSS-pixlar (ny i WCAG 2.2). Kriteriet finns eftersom motoriska funktionsnedsättningar — och även vanlig onoggrannhet på en liten skärm — gör tiny mål oanvändbara.
De två WCAG-kriterierna
- 2.5.5 Target Size (Enhanced) — Nivå AAA — pekarinmatningsmål måste vara minst 44×44 CSS-pixlar. Långvarig regel; svår att uppnå sajt-brett.
- 2.5.8 Target Size (Minimum) — Nivå AA, ny i WCAG 2.2 — pekarinmatningsmål måste vara minst 24×24 CSS-pixlar. Det praktiska efterlevnadsgolvet.
Ett mål som uppfyller AAA-tröskeln på 44×44 uppfyller också AA-tröskeln på 24×24.
Vad regeln faktiskt kräver
Siffrorna gäller målarea, inte bara den synliga ikonen. Apples Human Interface Guidelines och Googles Material Design standardiserar båda målstorlekar på 44pt / 48dp av samma skäl — det finns verkliga ergonomiska data bakom.
Ett vanligt mönster: en ikonknapp ritad som en 16×16-SVG, men med utfyllnad som ger den klickbara ytan 44×44. Det uppfyller regeln. Den synliga ikonen är liten; målet är den synliga ikonen plus den utfyllda ytan runt den.
Undantag
2.5.8 (AA-kriteriet) har uttryckliga undantag:
- Avståndbaserat undantag. Om ett mål är minst 24×24 eller omgivet av tillräckligt tomt utrymme så att inget annat mål är inom 24 CSS-pixlar godkänns det. Detta skyddar täta radlayouter (som textlänkar i brödtext) som har små målareor men är tillräckligt långt ifrån varandra för att inte råka trycka på en granne.
- Likvärdig kontroll på annan plats. Ett litet mål är okej om samma funktion finns via en annan, större kontroll på samma sida.
- Inlinjemål. Länkar i löpande text är undantagna — brödtext ska inte formateras om kring en 24-pixlarsregel per länk.
- Styrd av användaragenten. Webbläsarens standardkontroller är undantagna.
- Nödvändig. När storleken är nödvändig för funktionen (t.ex. ett CAPTCHA-rutnät).
Vad detta påverkar i praktiken
Tre vanliga produktionsfel:
- Ikonbaserade navknappar dimensionerade till 28×28. Bryter mot 2.5.8 om de inte omges av tillräckligt tomt utrymme, vilket de flesta täta navigeringsfält inte har.
- Tätt grupperade kryssrutelistor. Kryssrutor ritade 16×16 utan utfyllnad, radade vertikalt utan mellanrum. Varken målet eller avståndet uppfyller regeln.
- “Föregående/nästa”-pilar i mobilkaruseller. Ritas ofta som 32-pixelschevrons med 4 pixlar utfyllnad. Bryter mot 2.5.8.
Den snabbaste manuella granskningen
Öppna DevTools i en mobilemulerad viewport. Inspektera varje interaktivt element. Notera begränsningsrutan. Allt under 24 CSS-pixlar i någon dimension, med angränsande mål inom 24 CSS-pixlar, bryter mot 2.5.8.
De flesta team antar en designtoken för målstorlek för alla komponenter — varje interaktivt element får minst ett 44×44-tryckmål oavsett synlig storlek. Det är det billigaste sättet att göra regeln till ett icke-problem.