2.5.5 Zielgröße (erweitert)

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du versuchst in einer ruckelnden S-Bahn einen winzigen „Kaufen“-Button zu treffen – während dein Daumen zittert. Frustrierend? Für Menschen mit motorischen Einschränkungen, Tremor oder einfach größeren Fingern ist das Alltag.

Das Ziel von Erfolgskriterium 2.5.5 der WCAG ist deshalb klar: Bedienelemente sollen groß genug sein, damit sie sicher und präzise aktiviert werden können. Konkret heißt das: Buttons, Links und andere Ziele für Zeigereingaben brauchen eine Mindestgröße von 44 × 44 CSS-Pixeln.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um alle Ziele, die mit einem Zeiger (Maus, Finger, Stift) aktiviert werden:

Die Grundregel: Jedes Ziel ist mindestens 44 × 44 CSS-Pixel groß.

Ausnahmen gelten nur für:

• Gleichwertige Ziele: Dieselbe Funktion ist auf derselben Seite über einen anderen Link oder ein anderes Bedienelement erreichbar, das mindestens 44 × 44 CSS-Pixel groß ist.
• Ziele im Text: Links innerhalb eines Satzes oder Textblocks sind ausgenommen.
• Kontrolle durch den Browser: Die Größe wird vom Browser bestimmt und nicht von dir verändert.
• Wesentliche Darstellung: Eine bestimmte Darstellung des Ziels ist für die vermittelte Information unverzichtbar.

Wichtiger Unterschied zu Zielgröße (Minimum): Die AA-Variante verlangt nur 24 × 24 CSS-Pixel und erlaubt kleinere Ziele, wenn genug Abstand besteht. Bei 2.5.5 gibt es keine solche Abstandsregel – das Ziel selbst muss 44 × 44 Pixel groß sein.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du willst online einkaufen, aber deine Hände zittern leicht – oder du bedienst dein Smartphone im Winter mit Handschuhen. Winzige Buttons werden dann zur echten Hürde.

Große Ziele schaffen Barrierefreiheit, weil sie:

• Menschen mit motorischen Einschränkungen ermöglichen, Elemente sicher zu treffen
• Menschen mit Tremor oder eingeschränkter Feinmotorik helfen, Fehlklicks zu vermeiden
• Menschen unterstützen, die mit großen Fingern, mit dem Knöchel oder einem Eingabestift tippen
• Menschen mit Sehbehinderung größere, besser erkennbare Ziele bieten
• allen in unruhigen Umgebungen helfen, etwa in Bus und Bahn oder beim Gehen
• die Bedienung mit nur einer Hand erleichtern

Und nicht zuletzt: Große Ziele machen Oberflächen für alle angenehmer – besonders auf Touch-Geräten, wo ein Finger deutlich ungenauer ist als ein Mauszeiger.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: 44 × 44 Pixel sind technisch meist einfach umzusetzen. Hier ein paar bewährte Praxis-Tipps:

Grundregeln für ausreichend große Ziele:

• Verwende min-width: 44px und min-height: 44px für interaktive Elemente.
• Vergrößere die klickbare Fläche mit padding – das zählt zum Ziel, Außenabstand (margin) dagegen nicht.
• Bei Symbolen: Mach den umgebenden Button größer, nicht nur das Symbol.
• Teste auf echten Geräten, besonders auf Smartphones und Tablets.

Besonders wichtig bei:

• häufig genutzten Elementen wie Navigation und Hauptaktionen
• folgenreichen Aktionen wie Löschen oder Kaufen
• Elementen am Bildschirmrand oder in schwer erreichbaren Bereichen
• mehrstufigen Abläufen wie Formularen

Typische Umsetzung:

.button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 16px;
}

.icon-button {
  width: 44px;
  height: 44px;
  /* Symbol wird zentriert, der Button hat die richtige Größe */
}

Ausnahmen richtig nutzen:

• Links im Fließtext sind ausgenommen – eine Linkliste unter dem Text oder ein Menü aber nicht.
• Gibt es dieselbe Funktion zusätzlich als großes Element auf der Seite, reicht das.
• Unveränderte Standardelemente des Browsers, etwa native Checkboxen ohne eigenes Styling, sind ausgenommen.
• Kartenmarkierungen, deren genaue Position die Information ist, können unter die Ausnahme für wesentliche Darstellung fallen.

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

2.5.5 ist ein AAA-Kriterium und weder über das BFSG noch über die BITV 2.0 verpflichtend – die zugrunde liegende EN 301 549 verlangt WCAG 2.1 Level AA. 44 × 44 Pixel sind aber eine verbreitete Richtgröße für Touch-Ziele und ein guter Standard für dein Designsystem.

1. Weniger Fehlklicks, mehr Abschlüsse

Zu kleine Buttons führen zu Fehlklicks und Abbrüchen. Größere Bedienelemente bedeuten weniger Frust und mehr erfolgreich abgeschlossene Vorgänge – gerade im mobilen Onlinehandel.

2. Mobil gut bedienbar

Ein großer Teil der Nutzung findet auf Smartphones statt. Großzügige Touch-Ziele machen deine Website dort angenehm bedienbar.

3. Ein Polster für die Pflichtkriterien

Wer 44 × 44 Pixel als Standard setzt, erfüllt die AA-Anforderung von 24 × 24 Pixeln aus WCAG 2.2 mit Reserve – auch wenn im Alltag einmal ein Element etwas kleiner gerät.

Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 2.5.5 Target Size (Enhanced) (Level AAA)

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

• Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
• Inline: The target is in a sentence or block of 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 to the information being conveyed.

Kurz gesagt: Ziele für Zeigereingaben müssen mindestens 44 × 44 CSS-Pixel groß sein – außer es gibt ein großes Ersatzziel, das Ziel steht im Text, der Browser bestimmt die Größe oder die Darstellung ist wesentlich.