2.5.8 Target Size (Minimum)

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du versuchst auf deinem Smartphone einen winzigen "X"-Button zu treffen, um ein Pop-up zu schließen – aber deine Finger sind gerade kalt, du sitzt im Bus oder du hast einfach nicht die feinmotorischen Fähigkeiten, um millimetergenau zu treffen. Frustration garantiert.

Menschen mit motorischen Einschränkungen, Handzittern oder eingeschränkter Feinmotorik stehen vor genau diesem Problem – täglich. Aber auch alle anderen kämpfen mit zu kleinen oder zu eng beieinander stehenden Bedienelementen.

Das Ziel von Erfolgskriterium 2.5.8 der WCAG ist daher klar: Alle klickbaren Elemente müssen groß genug sein oder ausreichend Abstand haben, damit sie zielsicher aktiviert werden können – ohne versehentlich das falsche Element zu treffen.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um alle interaktiven Elemente, die per Pointer (Maus, Touch, Stift) bedient werden. Die Regel ist simpel:

Mindestgröße: 24 x 24 CSS-Pixel

Jedes klickbare Element muss mindestens 24 mal 24 CSS-Pixel groß sein. Das entspricht etwa 6 mal 6 Millimetern auf einem Standard-Display.

Ausnahmen gelten in folgenden Fällen:

• Spacing: Zu kleine Elemente sind okay, wenn sie so positioniert sind, dass ein gedachter Kreis von 24 Pixel Durchmesser um das Element herum keine anderen Elemente berührt
• Equivalent: Die Funktion kann über ein anderes, ausreichend großes Element auf derselben Seite erreicht werden
• Inline: Das Element steht im Fließtext oder ist durch die Zeilenhöhe des umgebenden Textes begrenzt
• User Agent Control: Die Größe wird vom Browser bestimmt und nicht vom Autor verändert (z.B. Scrollbalken)
• Essential: Eine bestimmte Darstellung ist essenziell oder rechtlich vorgeschrieben

Ein wichtiger Hinweis: Bei Slider, Farbwählern oder anderen Elementen, wo die Position innerhalb des Elements wichtig ist, zählt das gesamte Element als ein Ziel.

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du hast Parkinson und versuchst, Online-Banking zu machen. Die winzigen "Bestätigen"-Buttons werden zur Tortur, und ein Versehen beim "Abbrechen"-Button daneben kann teuer werden.

Ausreichend große oder gut beabstandete Bedienelemente schaffen Barrierefreiheit, weil sie:

• Menschen mit motorischen Einschränkungen wie Handzittern oder Spastiken helfen, zielsicher zu klicken
• Touch-Nutzern auf Smartphones und Tablets das Leben erleichtern – gerade bei wechselnden Umgebungen
• Älteren Menschen entgegenkommen, deren Feinmotorik natürlicherweise nachlässt
• Menschen mit großen Fingern oder solchen, die Geräte einhändig bedienen, mehr Präzision ermöglichen
• Allen Nutzern in bewegten Umgebungen (Bus, Bahn, Auto als Beifahrer) helfen

Und nicht zuletzt: Sie reduzieren Frustration und Bedienungsfehler für ausnahmslos alle Nutzer – auch die ohne Einschränkungen.

4. So setzt du das Kriterium erfolgreich um

Die gute Nachricht: Größere Buttons zu machen ist technisch meist simpel. Hier ein paar bewährte Praxis-Tipps:

Grundregeln für große Targets:

• Verwende mindestens 24 x 24 CSS-Pixel für alle klickbaren Elemente
• Nutze min-height und min-width in CSS, um sicherzustellen, dass Buttons nicht zu klein werden
• Vergiss nicht: Padding und Margins zählen zur klickbaren Fläche, wenn sie Teil des Links oder Buttons sind
• Teste auf verschiedenen Geräten – was am Desktop groß aussieht, kann auf dem Smartphone winzig werden

Spacing als Alternative:

• Wenn ein Element kleiner als 24 x 24 Pixel sein muss, sorge für mindestens 24 Pixel Abstand zu anderen klickbaren Elementen
• Rechne mit einem gedachten Kreis von 24 Pixel Durchmesser um jedes kleine Element
• Nutze margin oder gap in CSS, um ausreichend Abstand zu schaffen

Tools und Hilfsmittel:

• Browser-Entwicklertools können dir die exakten Pixel-Maße anzeigen
• Online-Tools wie "Target Size Checker" helfen bei der Überprüfung
• Design-Systeme sollten Minimum-Größen für Buttons definieren
• Teste mit echten Nutzern – besonders auf Touch-Geräten

Do's and Don'ts:

• ✅ Buttons eher zu groß als zu klein machen
• ✅ Bei Icon-Buttons zusätzliche Padding-Fläche einplanen
• ✅ In Listen und Menüs ausreichend Zeilenhöhe verwenden
• ❌ Buttons nur durch Hintergrundfarbe ohne echte Klickfläche definieren
• ❌ Wichtige Funktionen nur über winzige Icons zugänglich machen

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Auch bei Erfolgskriterium 2.5.8 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.

1. Conversion-Rate verbessern

Größere, besser klickbare Buttons reduzieren Abbrüche bei wichtigen Aktionen. Wenn Nutzer frustrationsfrei durch deinen Checkout-Prozess kommen, kaufen sie öfter. Das gilt besonders für Mobile-Shopping, wo bereits kleine Verbesserungen messbare Umsatzsteigerungen bringen.

2. Kundenzufriedenheit steigern

Niemand mag winzige Buttons – weder Menschen mit Einschränkungen noch ohne. Größere Bedienelemente verbessern die User Experience für alle und reduzieren Support-Anfragen wegen Bedienungsproblemen. Das spart Zeit und Kosten.

3. Marktanteil bei Mobile-Nutzern ausbauen

Da immer mehr Menschen primär mobil surfen, werden gut bedienbare Touch-Interfaces zum Wettbewerbsvorteil. Wer hier früh optimiert, gewinnt loyale Nutzer und hebt sich von der Konkurrenz ab.

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 W3

Success Criterion 2.5.8 Target Size (Minimum)

(Level AA)

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

- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

- Equivalent: The function can be achieved through a different control on the same page that meets this criterion;

- Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target 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 or is legally required for the information being conveyed.

← Zurück zur WCAG-Übersicht