WCAG 2.5.8: Zielgröße (Minimum)

WCAG 2.5.8 verlangt, dass Klick- und Touch-Ziele mindestens 24 × 24 CSS-Pixel groß sind oder so viel Abstand zu ihren Nachbarn haben, dass sich um jedes Ziel ein Kreis mit 24 Pixeln Durchmesser legen lässt, der kein anderes Ziel schneidet. Ausgenommen sind unter anderem Links im Fließtext und Ziele, für die es an anderer Stelle eine gleichwertige, große Alternative gibt.

(Englisch: Target Size (Minimum).)

Das Wichtigste in Kürze

• 24 × 24 CSS-Pixel sind das Minimum, kein Ziel. Die Touch-Richtlinien von Apple und Google empfehlen 44 bzw. 48 Pixel und die haben recht.
• Gemessen wird die Trefferfläche, nicht das Icon. Ein 16-px-Symbol in einem 24-px-Button erfüllt das Kriterium.
• Die Abstandsausnahme rettet kompakte Werkzeugleisten: Kleinere Ziele sind erlaubt, solange der 24-px-Kreis um jedes Ziel frei bleibt.
• Fünf Ausnahmen nennt die Norm: Abstand, gleichwertige Alternative, Inline, Steuerung durch den Benutzeragenten, Unentbehrlichkeit.
• 2.5.8 gilt für alle Zeigereingaben, also auch für die Maus. Es ist kein reines Mobil-Kriterium.
• Rechtsstand Juli 2026: Die EN 301 549 verweist noch auf WCAG 2.1, 2.5.8 ist damit im deutschen Recht noch nicht verbindlich. Die Fortschreibung ist absehbar.
• Auf Stufe AAA verlangt 2.5.5 volle 44 × 44 Pixel (ohne die Abstandsausnahme).

Wie groß muss ein Button mindestens sein?

Der Normtext setzt eine Untergrenze für die Größe der Fläche, die auf einen Zeigerklick reagiert: 24 × 24 CSS-Pixel. Entscheidend ist dabei, was gemessen wird: nämlich der Begrenzungsrahmen des Ziels, also die tatsächliche Trefferfläche inklusive Innenabstand und Rahmen, nicht die sichtbare Grafik. Wer ein 16-px-Icon in einen Button mit 4 px Innenabstand rundum legt, hat 24 px und ist durch.

Die fünf Ausnahmen im Einzelnen:

• Abstand: Das Ziel ist kleiner, aber ein gedachter Kreis von 24 Pixeln Durchmesser, zentriert auf dem Ziel, überschneidet kein anderes Ziel. Damit bleiben kompakte Werkzeugleisten und Symbolzeilen zulässig, solange sie Luft haben.
• Gleichwertig: Dieselbe Funktion gibt es auf derselben Seite noch einmal als Ziel, das die 24 Pixel erfüllt (etwa ein kleines Pfeil-Symbol und ein großer Textlink darunter).
• Inline: Das Ziel liegt in einem Satz oder Textblock, seine Größe wird also von der Zeilenhöhe bestimmt. Links im Fließtext sind damit ausdrücklich ausgenommen.
• Steuerung durch den Benutzeragenten: Größe und Darstellung kommen vom Browser und wurden nicht vom Autor verändert (etwa eine native Checkbox ohne eigenes Styling). Sobald du appearance: none setzt, greift die Ausnahme nicht mehr.
• Unentbehrlich: Die konkrete Darstellung ist für die Information wesentlich oder rechtlich vorgeschrieben. Punkte auf einer Landkarte an ihrer geografischen Position sind das Standardbeispiel.

Der vollständige Wortlaut samt aller Randfälle steht im Understanding-Dokument des W3C zu 2.5.8; das deutsche Prüfvorgehen beschreibt der Prüfschritt 2.5.8 des BIK BITV-Tests.

Wen betrifft es besonders?

Menschen mit Tremor, Spastik oder anderen motorischen Einschränkungen treffen kleine Ziele nicht zuverlässig und ein Fehltreffer ist selten folgenlos: Statt „Menge ändern“ trifft man „Artikel löschen“, statt „Antworten“ trifft man „Melden“. Ältere Nutzerinnen mit nachlassender Feinmotorik erleben dasselbe in abgeschwächter Form.

Für alle, die mit Kopf-, Augen- oder Switch-Steuerung arbeiten, ist die Zielgröße direkt proportional zum Zeitaufwand: Je kleiner das Ziel, desto länger dauert das Ansteuern und desto häufiger muss korrigiert werden.

Und dann ist da die situative Gruppe, also praktisch alle: dicker Daumen statt Zeigefinger, Handschuhe im Winter, eine Straßenbahn, die über eine Weiche fährt, ein Kind auf dem Arm. Winzige, dicht gepackte Icon-Buttons nerven im mobilen Alltag am meisten. Kein Wunder, dass dieses Kriterium in Nutzertests sofort auffällt.

Richtig & falsch im Code

/* Falsch: 16-px-Icon = 16-px-Ziel, direkt neben dem nächsten */
.icon-button { width: 16px; height: 16px; }

/* Richtig: kleines Icon, großes Ziel */
.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 24px;    /* Pflicht */
  min-height: 24px;
  padding: 0;
}
.icon-button svg { width: 16px; height: 16px; }

/* Besser: Touch-Komfortgröße, ohne die Optik zu ändern */
@media (pointer: coarse) {
  .icon-button { min-width: 44px; min-height: 44px; }
}

Wenn das Layout keinen Platz hergibt, lässt sich die Trefferfläche unsichtbar vergrößern:

/* Alternativ: Trefferfläche über ein Pseudoelement aufziehen */
.icon-button { position: relative; }
.icon-button::after {
  content: '';
  position: absolute;
  inset: -4px;        /* 16px Icon + 2×4px = 24px Ziel */
}

Vorsicht bei diesem Muster: Liegen zwei solche Buttons nebeneinander, überschneiden sich die vergrößerten Flächen und dann trifft man zuverlässig das falsche. Entweder Abstand einplanen oder gleich echte Innenabstände setzen.

Für Textlinks, die als Schaltfläche wirken sollen, ist der saubere Weg display: inline-block mit Innenabstand:

/* Richtig: Textlink mit echter Trefferfläche statt bloßem Text */
.link-button {
  display: inline-block;
  padding: 0.5rem 0.75rem;   /* ergibt bei 16px Text ≈ 40px Höhe */
}

Die Muster für Menüs und Werkzeugleisten stehen unter Mega-Menüs und Buttons vs. Links; für Paginierungen speziell unter Pagination und „Mehr laden“.

So testest du es

1. Kandidatenliste anlegen: Icon-Buttons, Schließen-Kreuze, Paginierung, Sternebewertungen, Datepicker-Tage, Checkbox-Flächen, Karussell-Punkte, Sortierpfeile in Tabellen. Das sind die Stellen, an denen es klemmt.
2. In den DevTools messen: Element inspizieren, im Box-Modell Breite und Höhe ablesen. Gemessen wird der Begrenzungsrahmen, nicht das SVG darin.
3. Bei kleineren Zielen den Abstand prüfen: Passt ein 24-px-Kreis um das Ziel, ohne ein anderes Ziel zu schneiden? Bei zwei nebeneinanderliegenden Zielen heißt das: mindestens 24 Pixel zwischen den Mittelpunkten.
4. Ausnahmen dokumentieren: Für jedes kleinere Ziel notieren, welche der fünf Ausnahmen greift. Das ist die Aufzeichnung, die im Audit verlangt wird.
5. Praxisprobe am Gerät: Die Seite auf dem Telefon mit dem Daumen bedienen, nicht mit dem Zeigefinger, und im Gehen. Fehltreffer sind der eigentliche Befund.

Häufiger Fehler in der Praxis

Der häufigste Fall ist das Schließen-Kreuz: 14 bis 18 Pixel groß, oben rechts in der Ecke eines Dialogs oder Cookie-Banners. Es ist das Element, das unter Zeitdruck getroffen werden muss, und es ist regelmäßig das kleinste auf der Seite. Dabei kostet die Korrektur nichts. Der Innenabstand vergrößert nur die Fläche, das Kreuz selbst bleibt gleich.

Der zweite ist die kompakte Tabellenzeile: Bearbeiten, Duplizieren, Löschen, alle drei als 16-px-Symbole direkt nebeneinander. Hier greift die Abstandsausnahme nicht, weil kein Abstand da ist und ausgerechnet neben dem Löschen-Symbol ist ein Fehltreffer teuer. Ich würd dir raten, in solchen Zeilen die destruktive Aktion nicht direkt neben eine harmlose zu legen; das hilft allen, nicht nur denen mit Tremor.

Und der dritte, der leicht übersehen wird: eigene Checkboxen. Solange sie nativ sind, greift die Benutzeragenten-Ausnahme. Sobald jemand appearance: none setzt und ein eigenes Kästchen baut, ist das Ziel plötzlich 16 × 16 Pixel groß und die Ausnahme weg. Der Ausweg ist einfach: das <label> klickbar machen. Dann ist die gesamte Beschriftung Teil des Ziels und die 24 Pixel sind kein Thema mehr.

Häufige Fragen

Gilt WCAG 2.5.8 auch für Links im Fließtext?

Nein. Die Inline-Ausnahme nimmt Ziele aus, die in einem Satz oder Textblock liegen und deren Größe von der Zeilenhöhe bestimmt wird. Ein Link mitten im Absatz muss also keine 24 Pixel Höhe haben. Sobald ein Link aber aus dem Textfluss herausgelöst ist (als Listenpunkt, in einer Navigation, als eigene Zeile), greift die Ausnahme nicht mehr.

Ist 2.5.8 in Deutschland verbindlich?

Stand Juli 2026 nicht. Die EN 301 549 verweist in ihrer geltenden Fassung auf WCAG 2.1, und 2.5.8 kam erst mit WCAG 2.2. Damit ist das Kriterium weder über das BFSG noch über die BITV 2.0 unmittelbar einklagbar. Eine Fortschreibung der Norm auf WCAG 2.2 gilt als absehbar. Wer jetzt baut, sollte das Kriterium einplanen. Dies ist keine Rechtsberatung.

Gilt das Kriterium nur für Touchscreens?

Nein. Der Normtext spricht von Zeigereingaben allgemein, also auch von Maus, Trackpad, Stift und Kopfsteuerung. Für die Maus ist die Wirkung geringer, weil sie präziser zielt. Ein 12-px-Sortierpfeil in einer Tabelle ist aber auch mit der Maus mühsam.

Zählt der Abstand von Rand zu Rand oder von Mitte zu Mitte?

Von Mitte zu Mitte. Die Regel lautet: Ein Kreis mit 24 Pixeln Durchmesser, auf dem Mittelpunkt des Ziels zentriert, darf kein anderes Ziel überschneiden. Bei zwei 16-px-Zielen nebeneinander heißt das mindestens 24 Pixel zwischen den Mittelpunkten, also mindestens 8 Pixel sichtbarer Zwischenraum.

Was ist der Unterschied zu 2.5.5 Zielgröße (Erweitert)?

2.5.5 steht auf Stufe AAA, verlangt 44 × 44 CSS-Pixel und kennt die Abstandsausnahme nicht. Dort muss das Ziel selbst groß genug sein. In der Praxis ist 44 Pixel ohnehin der Wert, auf den die Plattform-Richtlinien von Apple und Google zusteuern; wer für Touch baut, landet fast automatisch dort.

Verwandte Themen

• Die neuen WCAG-2.2-Kriterien: 2.5.8 im Kontext der Neuerungen
• 2.5.2 Zeiger-Abbruch: Fehltreffer verzeihen statt verhindern
• 2.5.7 Ziehbewegungen: das zweite neue Zeiger-Kriterium
• Buttons vs. Links: solide Bedienelemente als Basis
• Aktuelles zum BFSG: Stand der Normfortschreibung