Klickfläche zu klein (target-size)

Die Regel target-size meldet Buttons, Links und andere Bedienelemente, die kleiner als 24 × 24 CSS-Pixel sind und zu dicht neben anderen stehen. Wer zittert oder am Smartphone tippt, trifft das falsche. Die Lösung ist eine Mindestgröße von 24 × 24 px für jede Klickfläche – oder genug Abstand um die kleinen herum.

Was die Regel bedeutet

WCAG 2.5.8 Zielgröße (Minimum) ist neu in WCAG 2.2, auf Stufe AA. Eine Zeiger-Zielfläche muss mindestens 24 × 24 CSS-Pixel groß sein, es sei denn, eine dieser Ausnahmen greift:

• Abstand: Ein Kreis mit 24 px Durchmesser, mittig auf dem Ziel, berührt kein anderes Ziel und keinen Kreis eines anderen kleinen Ziels.
• Gleichwertig: Dieselbe Funktion gibt es über ein anderes, ausreichend großes Bedienelement auf der Seite.
• Im Text: Das Ziel steht in einem Satz oder seine Größe ergibt sich aus der Zeilenhöhe – ein Link im Absatz.
• Vom Browser gesteuert: Der Browser zeichnet das Element, und die Autorin hat es nicht verändert.
• Wesentlich: Die Größe ist wesentlich oder rechtlich vorgegeben, etwa bei Markierungen auf einer Karte.

axe misst jedes Bedienelement, das nicht im Fließtext steht, und bei kleinen den Abstand zu den nächsten Nachbarn. Die Ausnahmen „gleichwertig“ und „wesentlich“ kennt axe nicht. Verdeckt ein anderes Element einen Teil des Ziels oder steht ein kleines Element nicht in der Tab-Reihenfolge, kann axe oft nicht entscheiden und meldet den Fall als offen.

Die Regel ist in axe-core standardmäßig ausgeschaltet – viele Werkzeuge führen sie deshalb nie aus. Reviseberg führt den vollständigen Regelsatz für WCAG 2.2 A/AA aus, der sie enthält. EN 301 549 V3.2.1 beruht auf WCAG 2.1 und hat für 2.5.8 keinen Abschnitt; deshalb steht im Kasten „keine“.

Wen es betrifft

Menschen mit Tremor, Parkinson, Arthritis oder eingeschränkter Feinmotorik. Menschen, die mit Kopfmaus, Mundstab oder Trackball arbeiten. Ältere Menschen, deren Treffsicherheit nachlässt. Und alle, die das Smartphone mit einer Hand, im Bus oder mit großen Fingern bedienen – kleine, dicht gepackte Ziele gehören zu den häufigsten Ärgernissen am Handy.

Warum die Prüfung anschlägt

• Icon-Buttons – Schließen-×, Teilen-Symbole, „Kopieren“ oder „Löschen“ – mit 16–20 px ohne Innenabstand.
• Seitennummern und Karussell-Punkte, die mit wenigen Pixeln Abstand nebeneinanderstehen.
• Social-Icons und Linkreihen im Footer, eng gesetzt, damit sie in eine Zeile passen.
• Mobile Layouts, die die Icon-Größen vom Desktop übernehmen, aber bei 360 px die Abstände schrumpfen lassen.
• Komponentenbibliotheken mit einer Größe „klein“ oder „kompakt“, die für wichtige Bedienelemente verwendet wird.

So beheben Sie es

1. Geben Sie jedem Bedienelement mit min-width/min-height und Innenabstand eine Klickfläche von mindestens 24 × 24 px – das Icon darf klein bleiben, die Fläche wächst.
2. Müssen Elemente klein bleiben, setzen Sie sie so weit auseinander, dass ein 24-px-Kreis um jedes keinen Nachbarn berührt.
3. Für Oberflächen, die viel per Touch bedient werden, planen Sie großzügiger: 44 × 44 px ist der Wert der Stufe AAA (2.5.5 Zielgröße (erweitert)) und für Finger angenehm.

/* Vorher – Ziele von 16 × 16 px, 2 px Abstand */
.seiten      { display: flex; gap: 2px; }
.seiten__btn { width: 16px; height: 16px; padding: 0; font-size: 12px; line-height: 1; }

/* Nachher – mindestens 24 × 24 px, mit Platz dazwischen */
.seiten      { display: flex; gap: 8px; }
.seiten__btn { min-width: 24px; min-height: 24px; padding: 4px 8px; font-size: 16px; line-height: 1; }

So prüfen Sie es von Hand

1. Öffnen Sie die Seite in den Entwicklertools mit Geräte-Emulation in Handybreite (360 px) und in Desktopbreite.
2. Fahren Sie über kleine Bedienelemente und lesen Sie die Größe im Element-Tooltip ab – unter 24 × 24 px lohnt ein genauerer Blick.
3. Prüfen Sie für jedes kleine Element den Abstand: Würde ein 24-px-Kreis in seiner Mitte ein benachbartes Bedienelement überlappen?
4. Probieren Sie die Seite auf einem echten Smartphone: Tippen Sie jeden Icon-Button und jede Seitennummer einmal an. Fehltreffer sind genau der Befund, den die Regel vorhersagt.
5. Entscheiden Sie die Ausnahmen, die die Regel nicht sieht: Gibt es ein gleichwertiges größeres Bedienelement, oder ist die kleine Größe wesentlich?

Zugehöriges WCAG-Kriterium

2.5.8 Zielgröße (Minimum), Stufe AA. Verwandt: 2.5.1 Zeigergesten und 2.5.7 Ziehbewegungen, die anderen WCAG-Kriterien zur Bedienung mit einem Zeigegerät; 2.5.5 Zielgröße (erweitert) ist die Variante der Stufe AAA mit 44 × 44 px.

So meldet Reviseberg diese Regel

Reviseberg führt target-size auf jeder gecrawlten Seite zweimal aus – bei 1280 px und noch einmal bei 360 px, weil ein schmales Layout Ziele oft zusammenschiebt, die am Desktop Platz haben. Die Befundliste zeigt die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Ziele und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail sehen Sie den CSS-Selektor, den HTML-Ausschnitt und jede betroffene Seite.

Ziele, die axe nicht entscheiden kann – teilweise von einem anderen Element verdeckt oder nicht in der Tab-Reihenfolge –, landen in der Warteschlange „Mögliche Probleme“. Dort entscheidet ein Mensch; als bestanden zählen sie nie. Greift eine Ausnahme, die die Regel nicht sieht – etwa ein gleichwertiges größeres Bedienelement –, markieren Sie den Befund mit dieser Begründung als „Fehlalarm“. „Ignorieren“ und „nicht behebbar“ funktionieren genauso; jede Entscheidung wird protokolliert.

Verwandte Regeln

• undefined – Zoom gesperrt, sodass niemand kleine Ziele selbst vergrößern kann.
• undefined – Icon-Buttons, denen zusätzlich der Name fehlt.
• undefined – Links im Fließtext, die diese Regel ausnimmt, müssen trotzdem erkennbar sein.

Jede Klickfläche auf Desktop und Handy messen – kostenloser Scan