Wie groß Klickflächen sein müssen

So funktioniert es

Eine Klickfläche ist der Bereich, in dem ein Tippen oder Klick ein Element auslöst. Bei einem Icon-Button ist das oft nur das Symbol selbst, bei einem Textlink die Zeile des Textes. Liegen kleine Ziele dicht beieinander, trifft man leicht das falsche: mit dem Finger auf dem Smartphone, mit zitternder Hand, mit eingeschränkter Feinmotorik oder einfach im Gehen.

WCAG 2.2 hat dafür das Kriterium 2.5.8 eingeführt: Ein Ziel ist mindestens 24 × 24 CSS-Pixel groß. Kleinere Ziele sind erlaubt, wenn sie genug Abstand haben: Ein Kreis von 24 Pixel Durchmesser um die Mitte jedes kleinen Ziels darf kein anderes Ziel und keinen anderen solchen Kreis schneiden. Die strengere Stufe 2.5.5 verlangt 44 × 44 Pixel; das ist auch die Größe, die Apple für Touch-Ziele empfiehlt.

2.5.8 ist neu in WCAG 2.2. Die für BFSG und BITV 2.0 maßgebliche Norm EN 301 549 verweist bisher auf WCAG 2.1, in der es noch nicht vorkommt. Gute Praxis ist es trotzdem.

Worauf es ankommt

• Die Klickfläche zählt, nicht das Symbol. Ein 16 Pixel großes Icon kann eine Klickfläche von 44 Pixel haben, wenn der Button Innenabstand hat.
• Abstand als Ausweg. Wo Platz knapp ist, etwa bei Social-Icons im Fuß, reicht genug Freiraum zwischen kleinen Zielen.
• Ausnahmen. Links im Fließtext, Bedienelemente des Browsers, die du nicht veränderst, und Ziele, für die es auf derselben Seite eine gleichwertige größere Alternative gibt, fallen nicht unter die Regel.
• Typische Problemstellen. Slider-Punkte, Schließen-Kreuze von Popups und Bannern, Paginierung, dicht gesetzte Links in Fußzeilen und Menüs mit kleiner Zeilenhöhe.

Eine Mindestgröße vergrößert die Fläche, das Symbol bleibt gleich groß und mittig:

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

So richtest du es ein

Größe und Abstände von Bedienelementen legt das Theme fest, also das CSS. Wer das Theme pflegt, vergrößert die Klickflächen über Innenabstand, Mindestgröße oder Zeilenhöhe; am Aussehen ändert sich dabei oft wenig. Elemente aus Plugins, etwa Slider oder Cookie-Banner, lassen sich meist über eigenes CSS anpassen. Der Report nennt die zu kleinen Ziele mit ihrem Code.