Große genug Touch-Ziele: Klick- und Tippflächen richtig dimensionieren

Einige Schaltflächen und Links sind so klein oder eng gesetzt, dass sie sich am Smartphone kaum treffen lassen. WCAG 2.2 AA verlangt dafür mindestens 24×24 CSS-Pixel oder ausreichend Abstand zu Nachbarelementen; EverAudit misst das automatisiert und meldet Unterschreitungen als Befund.

Was ist das Problem?#

Interaktive Elemente — Buttons, Links, Icon-Schaltflächen, Formular-Checkboxen — müssen groß genug sein, um sie präzise antippen zu können. Ist die klickbare Fläche kleiner als 24×24 CSS-Pixel und liegt sie zusätzlich dicht neben anderen klickbaren Elementen, steigt die Wahrscheinlichkeit für Fehltipps deutlich. Typische Fundorte: eng gepackte Icon-Leisten, kleine „X"-Schließen-Buttons in Modals, dicht stehende Pagination-Zahlen oder winzige Social-Media-Icons im Footer.

Das Kriterium ist relativ neu — es kam mit WCAG 2.2 dazu und ist auf vielen bestehenden Websites noch nicht systematisch berücksichtigt.

Warum prüft EverAudit das?#

target-size gehört zu den am häufigsten verletzten neuen WCAG-2.2-Kriterien — viele Designs wurden vor Einführung dieser Regel entworfen und orientieren sich primär an der visuellen Größe eines Icons, nicht an seiner tatsächlich klickbaren Fläche. EverAudit stuft die Regel als prio1-Befund ein, weil zu kleine Ziele eine Funktion für einen Teil der Besucher praktisch unbedienbar machen — nicht nur unbequem.

Welche Auswirkung hat das?#

Besucher tippen daneben — besonders mit größeren Fingern oder motorischen Einschränkungen — und brechen genervt ab. Bei dicht stehenden Elementen kommt es zudem zu Fehlbedienungen: ein versehentlicher Klick auf „Löschen" statt „Bearbeiten", weil beide Buttons zu eng nebeneinander liegen. Das kostet nicht nur Nutzerfreundlichkeit, sondern real Conversion — jeder Fehltipp im Checkout-Flow ist ein potenzieller Abbruch.

Wie beheben Sie zu kleine Klickflächen?#

Meist genügt es, die tatsächlich klickbare Fläche zu vergrößern, ohne die sichtbare Icon-Größe zu ändern — über zusätzliches Padding:

/* vorher: 16×16 px Icon, keine zusätzliche Klickfläche */
.icon-button {
  width: 16px;
  height: 16px;
}

/* nachher: Icon bleibt 16×16 px sichtbar, Klickfläche wächst auf 24×24 px */
.icon-button {
  width: 16px;
  height: 16px;
  padding: 4px;
  box-sizing: content-box;
}

Bei eng stehenden Elementen (z. B. Pagination) hilft alternativ mehr Abstand:

.pagination-item {
  min-width: 24px;
  min-height: 24px;
  margin: 0 4px; /* Abstand statt Vergrößerung */
}

Konkretes Vorgehen:

1. Betroffene Elemente identifizieren — EverAudit meldet Selektor und gemessene Größe je Fund.
2. Padding statt visueller Vergrößerung — die klickbare Fläche kann größer sein als das sichtbare Icon, ohne das Design zu verändern.
3. Bei dicht stehenden Elementen Abstand statt Größe erhöhen, wenn ein größeres Element optisch nicht passt.
4. Mobile besonders prüfen — Finger treffen ungenauer als ein Mauszeiger, hier zeigt sich das Problem am deutlichsten.
5. Im Design-System verankern — eine Mindestgröße für interaktive Elemente als globale Regel spart wiederkehrende Einzelfixes.

Fazit#

Zu kleine Klickflächen sind selten ein Design-Problem, sondern meist ein fehlendes Padding um ein an sich richtig platziertes Element. Eine Mindestgröße von 24×24 CSS-Pixel oder ausreichend Abstand zu Nachbarelementen lässt sich in den meisten Fällen nachrüsten, ohne das visuelle Erscheinungsbild zu verändern.