WCAG 2.5.8: Zielgröße (Minimum)

Klick- und Touch-Ziele müssen mindestens 24 × 24 CSS-Pixel groß sein – oder so viel Abstand zu ihren Nachbarn haben, dass sich um jedes Ziel ein 24-px-Kreis legen lässt, der kein anderes Ziel schneidet. (Englisch: Target Size (Minimum).)

Was verlangt das Kriterium?

24 × 24 px sind das Minimum, kein Ziel – Touch-Richtlinien empfehlen eher 44–48 px. Die Ausnahmen:

• Abstand: Kleinere Ziele sind okay, wenn der 24-px-Kreis um sie herum frei bleibt (kompakte Toolbars mit Luft).
• Gleichwertige Alternative: Dieselbe Funktion existiert woanders in groß.
• Inline: Links im Fließtext sind ausgenommen – die Zeilenhöhe diktiert.
• Vom Browser bestimmt: native Controls ohne Autoren-Styling.
• Essenziell: die Darstellung erzwingt es (Kartenpunkte auf Geo-Position).

Wen betrifft es besonders?

Menschen mit Tremor und motorischen Einschränkungen, ältere Nutzer mit nachlassender Feinmotorik – und situativ alle: dicke Daumen, Handschuhe, wackelnde Bahn. Winzige, dicht gepackte Icon-Buttons sind eine der spürbarsten Alltagsbarrieren des mobilen Webs.

Richtig & falsch im Code

/* Falsch: 16-px-Icon = 16-px-Ziel, direkt neben dem nächsten */
.icon-button { width: 16px; height: 16px; }

/* Richtig: kleines Icon, großes Ziel */
.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 24px;   /* besser: 44px für Touch-Flächen */
  min-height: 24px;
}
.icon-button svg { width: 16px; height: 16px; }

/* Alternativ: Trefferfläche unsichtbar vergrößern */
.icon-button { position: relative; }
.icon-button::after {
  content: '';
  position: absolute;
  inset: -6px; /* 16px Icon + 2×6px = 28px Ziel */
}

Diese Website nutzt für Menü-Trefferflächen durchgehend mindestens 24 px – der Grund steht im Mega-Menü-Muster.

So testest du es

1. DevTools-Messung: kritische Kandidaten inspizieren – Icon-Buttons, Schließen-Kreuze, Paginierung, Datepicker-Tage, Checkbox-Flächen. Breite × Höhe ≥ 24 px?
2. Bei kleineren Zielen: Abstand messen (24-px-Kreis-Regel) oder die große Alternative benennen.
3. Praxisprobe am Gerät: mit dem Daumen (nicht dem Zeigefinger) bedienen – Fehltreffer sind der Befund.

Verwandte Themen

• Die neuen WCAG-2.2-Kriterien – 2.5.8 im Kontext der Neuerungen
• 2.5.2 Zeiger-Abbruch – Fehltreffer verzeihen
• Buttons vs. Links – solide Bedienelemente als Basis