--- title: "Zielgröße (erweitert)" url: "https://barrierefreihochzwei.de/de/wcag/2-5-5-zielgroesse-erweitert" language: "de" description: "WCAG 2.5.5 verlangt für Klick- und Touchziele mindestens 44 × 44 CSS-Pixel. Du erfährst, welche Ausnahmen gelten und wie du große Ziele per CSS baust." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-15T09:42:00+02:00" --- # Zielgröße (erweitert) Wenn jeder Klick treffen muss. - **Erfolgskriterium:** 2.5.5 - **Prinzip:** Bedienbar - **Konformitätsstufe:** Level AAA - **Erklärung beim W3C:** [www.w3.org/WAI/WCAG22/Understanding/targ...](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) Erfolgskriterium 2.5.5 # 2.5.5 Zielgröße (erweitert) Level AAABedienbar Wenn jeder Klick treffen muss. ## 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)](https://barrierefreihochzwei.de/de/wcag/2-5-8-zielgroesse-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. **Offizielle Erklärung beim W3C** Das W3C erklärt jedes Erfolgskriterium ausführlich – mit Absicht, Beispielen und Techniken (auf Englisch). [Understanding 2.5.5](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html) ## Weitere Kriterien aus „Bedienbar“ [ 2.1.1 Level A ### Tastatur Wenn jeder Klick auch ein Tastendruck sein kann. ](https://barrierefreihochzwei.de/de/wcag/2-1-1-tastatur) [ 2.1.2 Level A ### Keine Tastaturfalle Wenn der Ausgang fehlt. ](https://barrierefreihochzwei.de/de/wcag/2-1-2-keine-tastaturfalle) [ 2.1.3 Level AAA ### Tastatur (keine Ausnahme) Wenn wirklich alles per Tastatur gehen muss. ](https://barrierefreihochzwei.de/de/wcag/2-1-3-tastatur-keine-ausnahme)