--- title: "Target Size (Enhanced)" url: "https://denniswagner.de/wcag/2-5-5-target-size-enhanced" language: "de" description: "Wenn jeder Klick treffen muss." published: "2025-01-01T08:00:00+01:00" updated: "2026-10-06T15:44:25+02:00" --- # Target Size (Enhanced) Wenn jeder Klick treffen muss. - **Erfolgskriterium:** 2.5.5 - **Prinzip:** Bedienbar - **Konformitätsstufe:** Level AAA Bedienbar·Level AAA·Erfolgskriterium 2.5.5 # 2.5.5 Target Size (Enhanced) ## 1. Was ist das Ziel dieses Kriteriums? Stell dir vor, du versuchst in einer wackelnden S-Bahn einen winzigen "Kaufen"-Button zu treffen – während dein Daumen zittert und das Display nur 5 Zentimeter groß ist. Frustrierend? Für Menschen mit motorischen Einschränkungen, Handzittern oder einfach größeren Fingern ist das täglich Realität. Das Ziel von Erfolgskriterium 2.5.5 der WCAG ist deshalb klar: Alle Bedienelemente müssen groß genug sein, damit sie sicher und präzise aktiviert werden können. Konkret bedeutet das: Buttons, Links und andere klickbare Elemente brauchen eine Mindestgröße von 44 x 44 CSS-Pixeln. ## 2. Was fordert das Erfolgskriterium genau? Ganz konkret geht es um alle Bedienelemente, die mit Zeigegeräten (Maus, Finger, Stift) aktiviert werden: **Die Grundregel:** Jedes anklickbare Element muss mindestens 44 x 44 CSS-Pixel groß sein. **Ausnahmen gelten nur für:** - **Äquivalente Targets:** Wenn die gleiche Funktion über ein anderes, ausreichend großes Element erreichbar ist - **Inline-Elemente:** Links innerhalb von Fließtext oder Sätzen sind ausgenommen (aber nicht, wenn der ganze Satz der Link ist) - **User-Agent-Kontrolle:** Größen, die vom Browser bestimmt und nicht vom Autor verändert werden - **Essenzielle Darstellung:** Wenn die spezifische Größe für die Informationsvermittlung zwingend erforderlich ist Ein wichtiger Unterschied zu anderen Kriterien: Hier gibt es keine "Spacing"-Alternative – das Element muss tatsächlich 44 x 44 Pixel groß sein, nicht nur entsprechend beabstandet. ## 3. Warum ist das wichtig für Barrierefreiheit? Stell dir vor, du willst online einkaufen, aber deine Hände zittern leicht – oder du nutzt dein Smartphone mit Handschuhen im Winter. Winzige Buttons werden dann zur echten Hürde. Target Size (Enhanced) schafft Barrierefreiheit, weil es: - Menschen mit motorischen Einschränkungen ermöglicht, Elemente sicher zu treffen - Nutzern mit Handzittern oder eingeschränkter Feinmotorik hilft, Fehlklicks zu vermeiden - Menschen mit großen Fingern oder bei Nutzung mit Knöcheln/Fingerspitzen unterstützt - Personen mit Sehbehinderungen größere, besser erkennbare Targets bietet - Allen Nutzern in unruhigen Umgebungen (öffentliche Verkehrsmittel, beim Gehen) hilft - Die Bedienung mit nur einer Hand erleichtert Und nicht zuletzt: Es macht digitale Interfaces für alle benutzerfreundlicher – besonders auf Touch-Geräten, wo der Finger deutlich ungenauer ist als ein Mauszeiger. ## 4. So setzt du das Kriterium erfolgreich um Die gute Nachricht: 44 x 44 Pixel umzusetzen ist technisch meist sehr einfach – und bringt sogar UX-Vorteile. Hier ein paar bewährte Praxis-Tipps: **Grundregeln für optimale Target-Größen:** - Verwende `min-width: 44px` und `min-height: 44px` für alle interaktiven Elemente - Denk an ausreichend `padding`, um den klickbaren Bereich zu vergrößern - Bei Icons: Mach den umgebenden Button größer, nicht nur das Symbol - Teste auf echten Geräten – besonders Smartphones und Tablets **Besonders wichtig bei:** - Häufig genutzten Elementen (Navigation, CTAs) - Nicht rückgängig machbaren Aktionen (Löschen, Kaufen) - Elementen am Bildschirmrand oder in schwer erreichbaren Bereichen - Sequenziellen Aufgaben (mehrstufige Formulare) **Typische Umsetzung:** ``` .button { min-width: 44px; min-height: 44px; padding: 12px 16px; /* Touch-Target ist automatisch groß genug */ } .icon-button { width: 44px; height: 44px; /* Icon wird zentriert, Button hat richtige Größe */ } ``` **Ausnahmen richtig nutzen:** - Inline-Links in Fließtext sind automatisch ausgenommen - Bei mehreren gleichen Funktionen reicht ein großes Element - Browser-Standard-Elemente ohne CSS-Anpassung sind meist OK - Karten-Pins oder ähnliche essenzielle kleine Elemente sind erlaubt ## 5. Warum dieses Erfolgskriterium für Unternehmen relevant ist Auch bei Level AAA gilt: Barrierefreiheit ist kein Luxus – sondern bringt handfeste Vorteile für dein Business. **1. Conversion-Rate optimieren** Zu kleine Buttons führen zu Abbrüchen und Fehlkäufen. Größere Bedienelemente bedeuten weniger Frust und mehr erfolgreiche Transaktionen – gerade im mobilen E-Commerce ein echter Umsatztreiber. **2. Mobile-First erfolgreich umsetzen** Mit über 60% mobilem Traffic sind große Touch-Targets kein Nice-to-have mehr, sondern essentiell. Wer hier versagt, verliert Kunden an die besser bedienbare Konkurrenz. **3. Rechtssicherheit und Zukunftsfähigkeit** Level AAA mag heute freiwillig sein – aber die Trends gehen zu strengeren Anforderungen. Wer jetzt die höchsten Standards erfüllt, ist für kommende Regulierungen gerüstet und zeigt echtes Commitment für Inklusion. Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen. ## 6. Das Erfolgskriterium im Wortlaut der 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. ## Weitere Kriterien aus „Bedienbar“ [ 2.1.1 Level A ### Tastatur Wenn jeder Klick auch ein Tastendruck sein kann. ](https://denniswagner.de/wcag/2-1-1-tastatur) [ 2.1.2 Level A ### No Keyboard Trap Wenn der Exit fehlt. ](https://denniswagner.de/wcag/2-1-2-no-keyboard-trap) [ 2.1.3 Level AAA ### Tastatur (Keine Ausnahme) Wenn der Code perfekt sein muss. ](https://denniswagner.de/wcag/2-1-3-tastatur-keine-ausnahme)