2.5.8 Zielgröße (Minimum)

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du versuchst auf deinem Smartphone einen winzigen „X“-Button zu treffen, um ein Pop-up zu schließen – aber deine Finger sind gerade kalt, du sitzt im Bus oder deine Feinmotorik lässt millimetergenaues Tippen nicht zu. Frust garantiert.

Menschen mit motorischen Einschränkungen, Tremor oder eingeschränkter Feinmotorik stehen täglich vor genau diesem Problem. Aber auch alle anderen kämpfen mit zu kleinen oder zu eng beieinanderliegenden Bedienelementen.

Das Ziel von Erfolgskriterium 2.5.8 der WCAG ist daher klar: Klick- und Touchziele müssen groß genug sein oder ausreichend Abstand haben, damit man sie sicher trifft – ohne versehentlich das falsche Element zu erwischen.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um alle Ziele, die mit einem Zeiger (Maus, Finger, Stift) bedient werden. Die Grundregel ist einfach:

Mindestgröße: 24 × 24 CSS-Pixel

Jedes Ziel ist mindestens 24 × 24 CSS-Pixel groß – es sei denn, eine der folgenden Ausnahmen greift.

Ausnahmen:

• Abstand: Kleinere Ziele sind in Ordnung, wenn ein gedachter Kreis mit 24 Pixel Durchmesser, mittig auf das Ziel gesetzt, kein anderes Ziel und keinen Kreis eines anderen zu kleinen Ziels schneidet.
• Gleichwertig: Die Funktion ist auf derselben Seite über ein anderes Bedienelement erreichbar, das die Anforderung erfüllt.
• Im Text: Das Ziel steht in einem Satz, oder seine Größe ist durch die Zeilenhöhe des umgebenden Textes begrenzt.
• Kontrolle durch den Browser: Die Größe wird vom Browser bestimmt und nicht von dir verändert.
• Wesentlich: Eine bestimmte Darstellung ist für die vermittelte Information wesentlich oder rechtlich vorgeschrieben.

Was der Abstand praktisch bedeutet: Zwei zu kleine Ziele nebeneinander brauchen mindestens 24 Pixel Abstand von Mittelpunkt zu Mittelpunkt. Liegt ein zu kleines Ziel neben einem ausreichend großen, muss sein Mittelpunkt mindestens 12 Pixel vom Rand des großen Ziels entfernt sein.

Hinweise aus dem Normtext: Bei Elementen, in denen die Position innerhalb des Elements einen Wert auswählt – etwa Schieberegler, Farbwähler mit Verlauf oder Textbereiche, in denen man den Cursor setzt –, zählt das gesamte Element als ein Ziel. Bei senkrecht laufender Schrift ist die „Zeilenhöhe“ entsprechend quer zur Textrichtung zu verstehen.

2.5.8 ist neu in WCAG 2.2. Die strengere AAA-Variante Zielgröße (erweitert) verlangt 44 × 44 Pixel ohne Abstandsregel.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du hast Parkinson und erledigst deine Bankgeschäfte online. Winzige „Bestätigen“-Buttons werden zur Tortur, und ein Fehlgriff auf „Abbrechen“ direkt daneben kostet Zeit und Nerven.

Ausreichend große oder gut verteilte Bedienelemente schaffen Barrierefreiheit, weil sie:

• Menschen mit motorischen Einschränkungen wie Tremor oder Spastik helfen, zielsicher zu klicken
• Menschen auf Smartphones und Tablets die Bedienung erleichtern
• älteren Menschen entgegenkommen, deren Feinmotorik nachlassen kann
• Menschen mit großen Fingern oder bei einhändiger Bedienung mehr Sicherheit geben
• allen in bewegten Umgebungen helfen, etwa in Bus und Bahn

Und nicht zuletzt: Sie verringern Frust und Bedienfehler für alle. Wie gut sich Fehlgriffe abfangen lassen, regelt zusätzlich Zeigereingabe-Abbruch.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Größere Buttons sind technisch meist einfach. Hier ein paar bewährte Praxis-Tipps:

Grundregeln für ausreichend große Ziele:

• Plane mindestens 24 × 24 CSS-Pixel für alle Klick- und Touchziele ein – besser mehr.
• Nutze min-height und min-width, damit Buttons nicht zu klein werden.
• Innenabstand (padding) zählt zur klickbaren Fläche, Außenabstand (margin) nicht – er hilft aber bei der Abstandsregel.
• Teste auf verschiedenen Geräten – was am Desktop groß wirkt, kann auf dem Smartphone winzig werden.

.icon-button {
  min-width: 24px;
  min-height: 24px;
  padding: 4px; /* vergrößert die klickbare Fläche */
}

.toolbar {
  display: flex;
  gap: 8px; /* Abstand zwischen den Zielen */
}

Abstand als Alternative:

• Muss ein Element kleiner als 24 × 24 Pixel sein, lass genug Platz drumherum.
• Denke in Kreisen: 24 Pixel Durchmesser um die Mitte jedes kleinen Ziels, die sich nicht mit anderen Zielen oder Kreisen überschneiden dürfen.
• Nutze margin oder gap, um den nötigen Abstand zu schaffen.

Prüfen:

• Die Browser-Entwicklerwerkzeuge zeigen dir die genauen Maße jedes Elements.
• Lege in deinem Designsystem Mindestgrößen für Buttons, Symbol-Buttons und Listeneinträge fest.
• Teste mit echten Menschen – besonders auf Touch-Geräten.

Das solltest du tun:

• Buttons lieber zu groß als zu klein gestalten.
• Bei Symbol-Buttons zusätzliche Innenfläche einplanen.
• In Listen und Menüs ausreichend Zeilenhöhe verwenden.

Das solltest du lassen:

• Nur das Symbol klickbar machen, während die sichtbare Fläche größer wirkt.
• Wichtige Funktionen ausschließlich über winzige Symbole zugänglich machen.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

2.5.8 ist neu in WCAG 2.2. Die EN 301 549, auf die sich BFSG und BITV 2.0 stützen, verweist derzeit auf WCAG 2.1 Level AA – ausdrücklich gefordert ist 2.5.8 damit (Stand Oktober 2026) nicht. Gerade für die mobile Nutzung bringt es aber viel und ist daher sehr empfehlenswert. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

1. Weniger Abbrüche

Größere, gut treffbare Buttons verringern Abbrüche bei wichtigen Aktionen. Wer ohne Frust durch deinen Bestellprozess kommt, schließt eher ab.

2. Zufriedenere Kundschaft

Niemand mag winzige Buttons – weder Menschen mit Einschränkungen noch ohne. Größere Bedienelemente verbessern die Nutzung für alle und verringern Rückfragen wegen Bedienproblemen.

3. Mobil gut aufgestellt

Viele Menschen surfen hauptsächlich auf dem Smartphone. Gut bedienbare Touch-Oberflächen sind dort ein echter Wettbewerbsvorteil.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 2.5.8 Target Size (Minimum) (Level AA)

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:

• Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
• Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
• Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
• User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Note 1: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Note 2: For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.

Kurz gesagt: Klick- und Touchziele müssen mindestens 24 × 24 CSS-Pixel groß sein oder genug Abstand zu anderen Zielen haben – mit Ausnahmen für gleichwertige Alternativen, Links im Text, Browser-Standardelemente und wesentliche Darstellungen.