Tipp-Zielgröße

Die Tipp-Zielgröße bezeichnet die wirksame Dimension eines Elements, das per Tippen oder Klicken aktiviert werden kann. WCAG definiert zwei Schwellenwerte: ein AAA-Minimum von 44×44 CSS-Pixel (seit WCAG 2.1) und ein AA-Minimum von 24×24 CSS-Pixel (neu in WCAG 2.2). Das Erfolgskriterium existiert, weil motorische Beeinträchtigungen — aber auch gewöhnliche Ungenauigkeit auf einem kleinen Bildschirm — winzige Ziele unbrauchbar machen.

Die zwei WCAG-Erfolgskriterien

• 2.5.5 Target Size (Enhanced) — Stufe AAA — Zeigereingabe-Ziele müssen mindestens 44×44 CSS-Pixel groß sein. Seit Langem geltende Regel; seitenübergreifend schwer umsetzbar.
• 2.5.8 Target Size (Minimum) — Stufe AA, neu in WCAG 2.2 — Zeigereingabe-Ziele müssen mindestens 24×24 CSS-Pixel groß sein. Die praktische Konformitätsschwelle.

Ein Ziel, das den AAA-Schwellenwert von 44×44 erfüllt, erfüllt automatisch auch den AA-Schwellenwert von 24×24.

Was die Regel tatsächlich verlangt

Die Zahlen beziehen sich auf die Zielfläche, nicht nur auf das sichtbare Symbol. Apples Human Interface Guidelines und Googles Material Design empfehlen aus demselben Grund standardmäßig Zielgrößen von 44 Punkt / 48 dp — dem liegen reale ergonomische Daten zugrunde.

Ein verbreitetes Muster: Ein symbolbasierter Button, dessen SVG-Icon 16×16 Pixel misst, erhält durch Innenabstand eine klickbare Fläche von 44×44 Pixel — das erfüllt die Regel. Das sichtbare Symbol ist klein; das Ziel ist das sichtbare Symbol zuzüglich des umgebenden Innenabstands.

Ausnahmen

2.5.8 (das AA-Erfolgskriterium) enthält ausdrückliche Ausnahmen:

• Abstandsbasierte Ausnahme. Wenn ein Ziel mindestens 24×24 Pixel groß oder von ausreichend Leerraum umgeben ist, sodass kein anderes Ziel innerhalb von 24 CSS-Pixel liegt, ist das Kriterium erfüllt. Diese Ausnahme schützt dichte Inline-Layouts (etwa Textlinks im Fließtext) mit kleinen Zielflächen, die jedoch weit genug voneinander entfernt sind, um ein versehentliches Antippen des Nachbarelements zu verhindern.
• Gleichwertiges Steuerelement an anderer Stelle. Ein kleines Ziel ist zulässig, wenn dieselbe Funktion über ein größeres Steuerelement auf derselben Seite verfügbar ist.
• Inline-Ziele. Links im Fließtext sind ausgenommen — Fließtext sollte nicht wegen einer 24-Pixel-pro-Link-Regel neu gesetzt werden.
• Browser-gesteuert. Browser-Standardsteuerelemente sind ausgenommen.
• Essenziell. Wenn die Größe für die Funktion unerlässlich ist (z. B. ein CAPTCHA-Raster).

Was das in der Praxis betrifft

Drei häufige Produktionsfehler:

• Symbol-Navigationsbuttons mit 28×28 Pixel. Verstößt gegen 2.5.8, sofern kein ausreichender Leerraum vorhanden ist — was in den meisten dichten Navigationsleisten nicht der Fall ist.
• Eng gestaffelte Checkbox-Listen. Checkboxen mit 16×16 Pixel ohne Innenabstand, vertikal ohne Abstände angeordnet. Sowohl Zielgröße als auch Abstände unterschreiten die Anforderung.
• „Zurück/Weiter“-Pfeile in mobilen Karussells. Oft als 32-Pixel- Winkelzeichen mit 4 Pixel Innenabstand umgesetzt. Verstößt gegen 2.5.8.

Das schnellste manuelle Audit

In DevTools eine mobil emulierte Ansicht öffnen und jedes interaktive Element inspizieren. Das Begrenzungsrechteck notieren. Alle Elemente, die in einer der beiden Dimensionen unter 24 CSS-Pixel liegen und bei denen benachbarte Ziele innerhalb von 24 CSS-Pixel liegen, verstoßen gegen 2.5.8.

Die meisten Teams führen ein Zielgrößen-Design-Token über alle Komponenten hinweg ein — jedes interaktive Element erhält unabhängig von seiner sichtbaren Größe mindestens eine Zielfläche von 44×44 Pixel. Das ist der kostengünstigste Weg, die Anforderung dauerhaft zu erfüllen.