Touch-Target-Size: Mindestgrößen für klickbare Elemente

Zu kleine Schaltflächen sind eine der häufigsten Barrieren im Web – besonders auf mobilen Geräten. Menschen mit motorischen Einschränkungen, Tremor oder eingeschränkter Feinmotorik können winzige Buttons schlicht nicht zuverlässig treffen. Aber auch ältere Nutzer, Menschen mit temporären Verletzungen oder schlicht jeder, der sein Smartphone mit einer Hand bedient, profitiert von ausreichend großen Touch-Targets. Die WCAG definiert zwei Stufen: Das strikte Kriterium 2.5.5 (Level AAA) verlangt mindestens 44×44 CSS-Pixel, während das neuere Kriterium 2.5.8 (Level AA, seit WCAG 2.2) einen pragmatischeren Ansatz wählt – 24×24 Pixel Mindestgröße, sofern ausreichend Abstand zu benachbarten Targets besteht.

WCAG-Anforderungen im Detail

Die WCAG unterscheidet zwei Erfolgskriterien für Zielgrößen. WCAG 2.5.5 „Target Size (Enhanced)" auf Level AAA fordert, dass jedes interaktive Element mindestens 44×44 CSS-Pixel groß sein muss. Ausnahmen gelten nur für Inline-Links im Fließtext, vom User-Agent gestylte Elemente und Fälle, in denen eine alternative Eingabemöglichkeit existiert. Das neuere WCAG 2.5.8 „Target Size (Minimum)" auf Level AA setzt die Schwelle bei 24×24 CSS-Pixel an, erlaubt aber kleinere Targets, wenn der Abstand zum nächsten interaktiven Element so groß ist, dass ein gedachter 24-Pixel-Kreis um das Target keine Überlappung erzeugt. Für die Praxis bedeutet das: Planen Sie Buttons und Links grundsätzlich mit mindestens 44×44 Pixeln – damit erfüllen Sie beide Kriterien komfortabel. Bei Platzmangel sind 24×24 Pixel mit ausreichendem Spacing das absolute Minimum. Vergessen Sie dabei nicht, dass die CSS-Pixel-Größe entscheidend ist, nicht die visuelle Darstellung allein – ein kleines Icon kann über Padding eine größere Klickfläche erhalten.

Typische Problemstellen in der Praxis

Die häufigsten Verstöße gegen die Target-Size-Anforderungen finden sich an überraschend vielen Stellen: Icon-Buttons ohne ausreichendes Padding – etwa ein 16×16-Pixel-Hamburger-Icon ohne erweiterte Klickfläche. Eng beieinanderliegende Links in Footer-Navigationen, wo Nutzer regelmäßig den falschen Link treffen. Checkbox- und Radio-Button-Gruppen mit zu geringem Abstand, sodass die falsche Option aktiviert wird. Paginierungs-Links mit winzigen Seitenzahlen. Social-Media-Icons in einer engen Reihe. Close-Buttons (×) in Modals und Cookie-Bannern, die absichtlich oder versehentlich zu klein geraten. Kartenbasierte Interfaces, bei denen nur der Titel klickbar ist, obwohl die gesamte Karte als Klickfläche erwartet wird. Besonders kritisch wird es, wenn kleine Targets direkt nebeneinander liegen – hier multipliziert sich das Problem, weil ein Fehlklick nicht nur ins Leere geht, sondern eine ungewollte Aktion auslöst.

CSS-Techniken für ausreichende Touch-Targets

Die gute Nachricht: Touch-Targets lassen sich fast immer vergrößern, ohne das visuelle Design zu beeinträchtigen. Die wichtigste Technik ist Padding: Statt ein Icon größer zu rendern, erweitern Sie die klickbare Fläche über Innenabstände. Ein 20×20-Pixel-Icon mit jeweils 12px Padding ergibt eine Klickfläche von 44×44 Pixeln bei unveränderter Optik. Für Links im Fließtext können Sie `display: inline-block` und vertikales Padding nutzen. Bei absolut positionierten Elementen wie Close-Buttons hilft ein unsichtbarer ::after-Pseudo-Element-Overlay, der die Klickfläche erweitert. Setzen Sie `min-height` und `min-width` auf interaktive Elemente als Sicherheitsnetz. Für Touch-Geräte können Sie über `@media (pointer: coarse)` gezielt größere Targets definieren. Achten Sie zusätzlich auf `touch-action: manipulation`, um Doppelklick-Verzögerungen zu eliminieren. Testen Sie die tatsächliche Klickfläche im Browser-DevTools – der Layout-Tab zeigt Ihnen exakt, wie groß der interaktive Bereich wirklich ist.

Touch-Targets und Mobile-First-Design

Mobile-First-Design und barrierefreie Touch-Targets gehen Hand in Hand. Wenn Sie Ihre Layouts zuerst für kleine Bildschirme entwerfen, denken Sie automatisch an Fingerbedienung statt Mauszeiger. Apples Human Interface Guidelines empfehlen 44×44 Points, Googles Material Design setzt 48×48 dp als Standard – beide liegen über den WCAG-Mindestanforderungen. Planen Sie in Ihrem Design-System eine Mindestgröße für alle interaktiven Komponenten ein. Definieren Sie Spacing-Tokens, die ausreichend Abstand zwischen Targets garantieren – 8px Minimum zwischen klickbaren Elementen ist ein guter Richtwert. Nutzen Sie Touch-Geräte zum Testen, nicht nur den Desktop-Browser mit verkleinertem Fenster. Bedenken Sie unterschiedliche Haltepositionen: Daumen-Erreichbarkeit am Smartphone variiert je nach Gerätegröße und Handhaltung. Die untere Bildschirmhälfte ist leichter erreichbar als die obere, die Mitte besser als die Ränder. Platzieren Sie primäre Aktionen entsprechend.