Begreber

Berøringmålsstørrelse

Se også: target size, tap target, hit target

Minimumsstørrelsen for interaktive elementer aktiveret via pointer-input. WCAG 2.5.5 (AAA) kræver 44×44 CSS-pixels; WCAG 2.5.8 (AA, ny i 2.2) kræver 24×24. Afgørende for brugere med motorisk funktionsnedsættelse og generelt for brugere med små skærme.

Berøringsmålsstørrelse er den operative dimension for ethvert element, en bruger kan tappe eller klikke på. WCAG fastsætter to grænseværdier: et AAA-minimum på 44×44 CSS-pixels (siden WCAG 2.1) og et AA-minimum på 24×24 CSS-pixels (ny i WCAG 2.2). Kriteriet eksisterer, fordi motorisk funktionsnedsættelse — og endda almindelig unøjagtighed på en lille skærm — gør bittesmå mål ubrugelige.

De to WCAG-kriterier

  • 2.5.5 Target Size (Enhanced) — niveau AAA — pointer-input-mål skal være mindst 44×44 CSS-pixels. En gammel regel; svær at opfylde på hele sitet.
  • 2.5.8 Target Size (Minimum) — niveau AA, ny i WCAG 2.2 — pointer-input-mål skal være mindst 24×24 CSS-pixels. Det praktiske overensstemmelses­gulv.

Et mål, der opfylder AAA-grænsen på 44×44, opfylder også AA-grænsen på 24×24.

Hvad reglen faktisk kræver

Tallene refererer til målarealet, ikke blot det synlige ikon. Apples Human Interface Guidelines og Googles Material Design har begge 44 pt / 48 dp som standard målstørrelse af samme årsag — der er reel ergonomisk data bag ved.

Et almindeligt mønster: en ikon-kun knap tegnet som en 16×16 SVG, men med polstring, der bringer det klikbare areal til 44×44. Det opfylder reglen. Det synlige ikon er lille; målet er det synlige ikon plus det polstrede område omkring det.

Undtagelser

2.5.8 (AA-kriteriet) har eksplicitte undtagelser:

  • Afstandsbaseret undtagelse. Hvis et mål er mindst 24×24 eller omgivet af tilstrækkelig luft, så intet andet mål er inden for 24 CSS-pixels, er det godkendt. Det beskytter tætte inline-layouts (som tekstlinks i brødtekst), der har små målarealer, men er langt nok fra hinanden til ikke ved et uheld at ramme en nabo.
  • Tilsvarende kontrolelement andetsteds. Et lille mål er i orden, hvis den samme funktion er tilgængelig via et andet, større kontrolelement på samme side.
  • Inline-mål. Links inde i løbende tekst er undtaget — brødtekst bør ikke omlayoutes efter en 24-pixel-pr.-link-regel.
  • Styret af brugeragenten. Browser-standard­kontrolelementer er undtaget.
  • Væsentlig. Når størrelsen er væsentlig for funktionen (f.eks. et CAPTCHA-gitter).

Hvad det påvirker i praksis

Tre almindelige produktionsfejl:

  • Ikon-kun nav-knapper størret til 28×28. Fejler 2.5.8, medmindre de er omgivet af tilstrækkelig luft, hvilket de fleste tætte nav-barer ikke har.
  • Tætpakkede afkrydsningsbox-lister. Afkrydsningsboxe tegnet 16×16 uden polstring, arrangeret lodret uden mellemrum. Både målet og afstanden er under reglen.
  • Mobile karrusel-”forrige/næste”-pile. Tegnes ofte som 32-pixel chevrons med 4 pixels polstring. Fejler 2.5.8.

Den hurtigste manuelle audit

Åbn DevTools på en mobil-emuleret viewport. Undersøg hvert interaktivt element. Notér bounding box. Alt under 24 CSS-pixels i en af dimensionerne, med tilstødende mål inden for 24 CSS-pixels, fejler 2.5.8.

De fleste teams anvender et målstørrelses-design­token på tværs af komponenter — hvert interaktivt element får mindst et 44×44-hit-areal uanset synlig størrelse. Det er den billigste måde at gøre reglen til et ikke-problem.