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.

← Zurück zur WCAG-Übersicht