§ 13

WCAG — ist die Klickfläche groß genug?

Er denne knap/dette link stort nok til at ramme sikkert, især på en berøringsskærm?

Antwort: WCAG 2.2's succeskriterium 2.5.8 kræver, at klikbare mål (knapper, links, ikoner man skal trykke på) er mindst 24×24 CSS-pixels — medmindre der er nok afstand til nabo-mål, målet står inline i tekst, eller størrelsen er styret af browseren selv. Den skærpede AAA-anbefaling (2.5.5) sætter grænsen ved 44×44 px. Indtast målets bredde og højde for at se, hvilket niveau det opfylder.

Formel

mindste tilladte klikbare mål (AA) = 24×24 CSS-pixels

anbefalet klikbart mål (AAA) = 44×44 CSS-pixels

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
bredde_px	Målets bredde	px
hoejde_px	Målets højde	px
=	Mindste side	px
=	Fläche	px²

Gültigkeit und Quelle

Quelle: WCAG 2.2, succeskriterium 2.5.8 Target Size (Minimum), AA (W3C) + 2.5.5 Target Size (Enhanced), AAA

Gilt nicht, wenn

Beregneren tjekker kun selve målets størrelse — den fulde undtagelsesvurdering (afstand til naboelementer, inline-tekst-undtagelsen) kræver et manuelt skøn af den konkrete placering.

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

Målets bredde20 px
Målets højde20 px

Geber

Mindste side20 px
Fläche400 px²

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

Små ikoner og links er svære at ramme med en finger eller for folk med rystende hænder. WCAG 2.2 kræver mindst 24 × 24 CSS-pixels (2.5.8, AA), og 44 × 44 er anbefalingen på AAA-niveau (2.5.5). Beregneren viser målets mindste side og areal.

Schritt für Schritt

Mål knappens eller linkets klikbare område i DevTools (inkl. padding, uden margin).
Find den mindste side.
Sammenlign med 24 px (AA) og 44 px (AAA).
Er målet mindre end 24 px, skal der være nok afstand til naboerne, ellers skal det gøres større.

Typische Fehler

At måle kun ikonet. Det er hele den klikbare flade, der tæller, så padding hjælper.
At tro at undtagelsen for links i tekst gælder alle links. Den gælder kun links midt i en sætning.
At lade to små mål stå tæt op ad hinanden. Afstands-undtagelsen kræver en cirkel på 24 px om hvert mål, der ikke overlapper naboens.

Beispiele aus dem Alltag

Luk-kryds på en modal

Et kryds i hjørnet af en dialog er 20 × 20 px.

Målets bredde: 20 px
Målets højde: 20 px

Es bedeutet: Den mindste side er 20 px, under kravet på 24 px. Giv knappen padding, så klikfladen bliver mindst 24 × 24, helst 44 × 44.

Mobilmenuens knap

Burger-knappen i toppen af en mobilside er 44 × 44 px.

Målets bredde: 44 px
Målets højde: 44 px

Es bedeutet: Den mindste side er 44 px, og arealet er 1.936 px². Det opfylder også AAA.

Chip i et filter

Filterchips i en webshop er 32 px brede og 24 px høje.

Målets bredde: 32 px
Målets højde: 24 px

Es bedeutet: Den mindste side er 24 px, så chippen består AA lige akkurat. På mobil er større chips nemmere at ramme.

Faustregel

24 px er gulvet, 44 px er godt for fingre. Apple og Google anbefaler 44 pt og 48 dp.

So überprüfst du die Antwort

Vælg elementet i DevTools, og hold musen over det. Den blå boks skal være mindst 24 × 24.